In this article, we learn how to use the font-feature-settings property in CSS, If you want to control the advanced typographic features in open-type fonts then the font-feature-settings property is very useful for developers.
One of the properties added to CSS3 is the font-feature-settings property, which enables a variety of font-related features that might enhance the way text appears on a page. The font-feature-settings property was created with the express purpose of allowing access to font characteristics that are not frequently utilized but are required for a specific use case.
By using this property, we can get control over advanced typographic settings like swashes, small caps, and ligatures. In order to activate them, you must declare the value in quotes followed by either 1 or on if you want to enable them. If you want to disable it, then you may use either 0 or off.
Syntax:
font-feature-settings: values;
Property values: This property accepts property value which is described below.
- values: This property refers to the values defined by OpenType feature tags like “smcp”, “smcp” on, “swsh” on, etc. It has global values as: “inherit”, “initial”, and “unset”.
Note: The default value for font-feature-settings is normal.
Example 1: Below is the example that illustrates the use of font-feature-settings property using the value “hlig”.
<!DOCTYPE html><html>
<head>
<style type="text/css">
p {
color: green;
padding: 7px;
font-weight: bold;
font-feature-settings: "hlig" 4;
}
</style>
</head>
<body>
<p>GeeksforGeeks!</p>
</body>
</html>
|
Output:
font feature to hlig
Example 2: Below is the example that illustrates the use of font-feature-settings property using the value “smcp” and “swsh”.
<!DOCTYPE html><html>
<head>
<style type="text/css">
p {
color: green;
padding: 8px;
font-weight: bold;
font-style: italic;
font-feature-settings: "smcp", "swsh" 5;
}
</style>
</head>
<body>
<p>It is a Computer Science portal</p>
</body>
</html>
|
Output: