font-feature-settings
Quick Summary for font-feature-settings
The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.
Code Usage for font-feature-settings
/* Use the default settings */ font-feature-settings: normal;  /* Set values for OpenType feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2;  /* Global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: revert; font-feature-settings: unset; 
More Details for font-feature-settings

font-feature-settings

The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.

Syntax

/* Use the default settings */ font-feature-settings: normal;  /* Set values for OpenType feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2;  /* Global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: revert; font-feature-settings: unset; 

Whenever possible, Web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

These lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, font-feature-settings shouldn't be used to enable small caps.

Values

normal

Text is laid out using default settings.

<feature-tag-value>

When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features. The tag is always a <string> of 4 ASCII characters. If it has more or less characters, or if it contains characters outside the U+20U+7E codepoint range, the whole property is invalid. The value is a positive integer. The two keywords on and off are synonyms for 1 and 0 respectively. If no value is set, the default is 1. For non-Boolean OpenType features (e.g. stylistic alternates), the value implies a particular glyph to be selected; for Boolean values, it is a switch.

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

normal | <feature-tag-value>#

where <feature-tag-value> = <string> [ <integer> | on | off ]?

Examples

Enabling various font features

/* use small-cap alternate glyphs */ .smallcaps { font-feature-settings: "smcp" on; }  /* convert both upper and lowercase to small caps (affects punctuation also) */ .allsmallcaps { font-feature-settings: "c2sc", "smcp"; }  /* use zeros with a slash through them to differentiate from "O" */  .nicezero { font-feature-settings: "zero"; }  /* enable historical forms */ .hist { font-feature-settings: "hist"; }  /* disable common ligatures, usually on by default */ .noligs { font-feature-settings: "liga" 0; }  /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; }  /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; }  /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; }  /* enable stylistic set 7 */ .fancystyle {   font-family: Gabriola; /* available on Windows 7, and on Mac OS */   font-feature-settings: "ss07"; } 

Specifications

Specification
CSS Fonts Module Level 4 # font-feature-settings-prop

See also

font-display font-family font-stretch font-style font-weight font-variant font-variation-settings src unicode-range OpenType Feature Tags list

Last modified: Sep 20, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語한국어Português (do Brasil)中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


seren spirit :(
Random CSS Property

font-variant-alternates

The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
character-variant() css reference