font-variant-alternates

この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

Summary

The font-variant-alternates CSS property controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values.

The at-rules defines names, for a given kind of alternative glyphs (stylistic, styleset, character-variant, swash, ornament or annotation), associating it to a given OpenType values. This property allows to use these user-friendly names in the stylesheet.

Syntax

font-variant-alternates: normal;
font-variant-alternates: historical-forms;
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* Global values */
font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;

Values

normal
This keyword leads to the deactivation of the use of such alternate glyphs.
historical-forms
This keyword enables the display of historical forms, that is glyphs that were common in the past but no more today. It corresponds to the OpentType value hist.
stylistic()
This function enables the display of a stylistic alternates. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value salt like salt 2.
styleset()
This function enables the usage of a set of stylistic alternatives for characters. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value ssXY like ss02.
character-variant()
This function enables the usage of a set of stylistic alternatives for characters. It is very similar to styleset() though the variant here doesn't create coherent glyphs for a set of characters; individual characters will have independant and not necessary coherent styles. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value cvXY like cv02.
swash()
This function enables the display of swash glyphs. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value swsh and cswh like swsh 2 and cswh 2.
ornaments()
This function enables the display of ornaments, that are fleurons and other dingbats-like glyphs. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value ornm like ornm 2.
Note: in order to preserve the semantic of the font, font designer are invited to include ornaments that doesn't match a Unicode zingbat character as ornaments variant of the bullet character (U+2022). Well-formed fonts will do that, though a lot of other fonts won't.
annotation()
This function enables the display of annotations, like circled digits or inverterd characters. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value nalt like nalt 2.

Formal syntax

normal | [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ] 

where
<feature-value-name> = IDENT

Examples

@font-feature-values Example Script { @swash { ident: 1; another_ident: 2; } }

p {
  font-family: Example Script;
  font-variant-alternates: swash(another_ident); /* use swash alternate #2 */
}

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-variant-alternates' in that specification.
Candidate Recommendation Initial definition

Browser Compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Basic support 34 (34) [1] ? ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 34.0 (34)[1] ? ? ?

[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

See also

ドキュメントのタグと貢献者

最終更新者: Sebastianz,