mozilla
Your Search Results

    font-variant-alternates

    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

    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>) ] 
    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);
    
    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.

    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

    Document Tags and Contributors

    Contributors to this page: jsx, teoli
    Last updated by: jsx,