mozilla
Your Search Results

    font-feature-settings Redirect 1

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts.

    Note: 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 does exists.

    In particular, this CSS property shouldn't be used to enable small caps.

    Syntax

    Formal syntax: normal | <feature-tag-value>#
    
    font-feature-settings: normal
    font-feature-settings: "smcp"
    font-feature-settings: "smcp" on
    font-feature-settings: "swsh" 2
    font-feature-settings: "smcp", "swsh" 2
    
    font-feature-settings: inherit
    

    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 an positive integer. The two keywords on and off are synonyms for 1 and 0 respectively. If no value is set, the default is 1. 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.

    Examples

    /* 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";
    }
    

    Specificat​ions

    Specification Status Comment
    CSS Fonts Module Level 3 Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 16.0 -webkit 4.0 (2.0) (See note)-moz 10.0 Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    Browser notes

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar