How to use 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 the developers.
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. 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.
Example1: Below is the example that illustrates the use of font-feature-settings property using the value “hlig”.
HTML
<!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
Example2: Below is the example that illustrates the use of font-feature-settings property using the value “smcp” and “swsh”.
HTML
<!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:
Please Login to comment...