RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/font-feature-settings below:

font-feature-settings · WebPlatform Docs

font-feature-settings 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
Percentages: N/A

Syntax

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

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.

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

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

@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

CSS Fonts Module Level 3: W3C Working Draft