Useful Specialized Font Properties with CSS

Some font properties are for performing specialized functions and typically used by advanced CSS users for fine- tuning text presentation. Some of them and their functions are presented here, namely font-feature-settings, font- synthesis, font-variant, font-stretch, and font. More detailed discussion of them is beyond the scope of this book.

1. font-feature-settings

The font-feature-settings property is inherited and allows you to control over the advanced typographical features of OpenType fonts, which are scalable fonts. The values it supports are normal keyword (which specifies to use default settings) and feature-tag-value (which specifies the list of comma-separated OpenType feature tag-values to use). A tag value indicates which feature to turn on or off. The on and off keywords can be used. For example, p { font-feature-settings: “smcp”; } specifies to turn on the small-caps feature, and p { font-feature-settings: “smcp” off; } says to turn it off.

2. font-synthesis

The font-synthesis property is used to specify which missing typefaces, italic or bold, can be synthesized by the browser if needed. It is inherited and the keyword values it takes are none (says nothing should be synthesized), weight (says to synthesize bold), and style (says to synthesize italic). The following rule, p { font-synthesis: bold; }, for example, says to synthesize bold typeface for the content of the <p> element.

3. font-variant

The font-variant property is inherited and shorthand for all font-variant subproperties, such as font-variant-caps, font-variant-numeric, font-variant-alternatives, font-variant-ligatures, font-variant-position, and font-variant-east- asian. Table 13.5 lists the functions of these properties. The rule, p {font-variant: small-caps; }, specifies to display the content of <p> element in small capital letters. The longhand would be p {font-variant-caps: small-caps; }.

4. font-stretch

The font-stretch property is used to select the most appropriate face (design), if more than one is provided for a font. Unlike the name might suggest, the property does not stretch a font, but simply selects a face. It is inherited and the values it takes are normal (which specifies a normal font face), semi-condensed, condensed, extra­condensed, and ultra-condensed (all of which specify a face more condensed than normal), and semi-expanded, expanded, extra-expanded, ultra-expanded (all of which specify a face more expanded than normal). Naturally, these values only take effect if a font provides the faces. Example usage: h1 {font-stretch: extra-expanded; }.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *