font-feature-settings

Jump to: navigation, search

font-feature-settings


W3C Working Draft

Summary

The font-feature-settings property gets or sets one or more values that specify glyph substitution (special font characters such as ligatures and figures) and positioning in fonts that include OpenType layout features.

Overview table

Initial value normal
Applies to All elements
Inherited Yes
Media visual
Computed value As specified
Animatable No
CSS Object Model Property fontFeatureSettings

Syntax

  • font-feature-settings: normal
  • font-feature-settings: "OpenType feature tag" Indicator


Values

normal
Default. No change in glyph substitution or positioning occurs.
"OpenType feature tag" Indicator
This property can take up to two separate parts in its value. The options are as follows:
  • OpenType feature tag: Comma-separated list of one or more OpenType layout feature tags (each with an optional toggle). See Notes for examples of correct syntax, plus a table of the most common feature tags and their definitions.
  • Indicator: 0 indicates that the feature is disabled. For boolean features, 1 indicates that feature is enabled. A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. For non-boolean features, 1 or greater indicates the feature selection index.


Examples

A selection of examples showing some typical uses of the font-feater-settings property.

HTML

<p class="smallcaps">Small caps</p>

<p class="ligatures">Ligatures</p>

CSS

@font-face {  
    font-family: 'myMinion';  
    src: url('MinionPro-Regular.otf') format('opentype');  
}  
  
body {  
    font-family: myMinion;  
} 

p.smallcaps { font-feature-settings: "smcp" 1; }

p.ligatures{ font-feature-settings: "liga" on; }

Notes

OpenType specification defines many advanced typographic features that can be implemented by font designers. For instance, you can define vertical positioning for a font, substitute glyph forms with ligatures, contextual alternates, stylistic alternates, or swashes, include a set of small caps, and more.
Each defined feature has a corresponding feature tag that identifies its function and effects. Font developers can also define their own features. A feature's tag determines what the feature does and whether to implement it. The following table lists some of the most common feature tags and their definitions.
For the full list of OpenType layout features, see OpenType layout feature tag registry.

  • kern — Kerning
  • smcp — Small capitals
  • liga — Standard ligatures
  • dlig — Discretionary ligatures
  • ss01, ss02, ss03 ... ss20 — Stylistic sets (font-specific)
  • swsh — Swash
  • tnum — Tabular figures
  • lnum — Lining figures
  • onum — Oldstyle figures

If you are unfamiliar with the font features listed above, the CSS Fonts Module Level 3 specification has good explanations and visual examples of each feature in Section 6, "Font feature properties." Be aware that, though the properties listed correspond to OpenType layout features that might be supported, the properties themselves (font-kerning, font-variant-*, and so on) are not supported.


Whenever possible, Web authors should use the font-variant property. This property has been designed to handle special cases where no other way to enable or access an OpenType font feature exists.


Related specifications

Specification Status Related Changes
CSS Fonts Module Level 3 W3C Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support
16.0 -webkit
4.0 -moz
10.0
Unsupported
6.0

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
10.0 -webkit
18.0 -webkit
18.0 -moz
?
Unsupported
Unsupported
3.2


Compatibility notes

Browser Version Note
Firefox 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.
Chrome Partial support in older Chrome versions refers to lacking support in Mac OS X.

See also

Related articles

Fonts







  • font-feature-settings
















External resources

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]