CSS - font-feature-settings
The font-feature-settings
CSS property gives you control over advanced typographic features in OpenType fonts.
Example
/* 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"; } /* 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"; }
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: unset;
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 contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid.
The value is a positive integer. The two keywordson
andoff
are synonyms for1
and0
respectively. If no value is set, the default is1
. 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 syntax
normal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/font-feature-settings#feature-tag-value"><feature-tag-value></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><feature-tag-value> = <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> on <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> off <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a></code></p>
Description
The font-feature-settings
CSS property gives you control over advanced typographic features in OpenType fonts.
font-variant
shorthand property or an associated longhand property, font-variant-ligatures
, font-variant-caps
, font-variant-east-asian
, font-variant-alternates
, font-variant-numeric
or font-variant-position
.This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.
In particular, this CSS property shouldn't be used to enable small caps.
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
16.0 -webkit |
10.0 | 15.0 -webkit | 9.1 (partial support in versions 4.0-6.0) |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 4.4 | 48.0 (unprefixed) | 48.0 (unprefixed) | ? | 24 | 9.3 (partial support in versions 3.2-6.1) |
[1] From Gecko 2.0 (Firefox 4.0) to Gecko 14.0 (Firefox 14.0) included, Gecko supported an older syntax, slightly different from the modern one: OpenType Font Feature support in Firefox 4.
[2] The ISO/IEC CD 14496-22 3rd edition suggests to use the ssty
feature to provide glyph variants adjusted to be more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. It also suggests applying the dtls
feature to letters when positing mathematical accent over it, in order to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can always override via CSS the default values determined by the MathML rendering engine.
[3] Starting with Firefox 34, the version prefixed with -moz-
is only kept for backward compatibility purpose. It is controlled by the layout.css.prefixes.font-features
, defaulting to true
. The prefixed property will be removed in the future.
See Also
- FontFont OpenType User Guide (pdf)
- OpenType Feature Tags list
- Using the whole font (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-feature-settings' in that specification. |
Candidate Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/font-feature-settings