mozilla
Your Search Results

    unicode-range

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

    The unicode-range CSS descriptor sets the specific range of characters to be downloaded from a font defined by @font-face and made available for use on the current page.

    This descriptor can be used to make a custom @font-face contain only the characters that need to be downloaded, saving bandwidth.

    Note: Web developers should always include a fallback font that is acceptable in case the unicode-range descriptor @font-face is not supported and the whole at-rule being invalid.

    Syntax

    Formal syntax: <urange>#
            where: <urange> = single_codepoint | codepoint_range | wildcard_range
    
    unicode-range: U+26               /* single_codepoint */
    unicode-range: U+0025-00FF        /* codepoint_range */
    unicode-range: U+4??              /* wildcard_range */
    unicode-range: U+0025-00FF, U+4?? /* multiple values can be separated by commas */

    Values

    single_codepoint
    A single Unicode character code point, for example U+26.
    codepoint_range
    A range of Unicode code points. So for example, U+0025-00FF means include all characters in the range U+0025 to U+00FF.
    wildcard_range
    A range of Unicode code points containing wildcard characters, that is using the '?' character, so for example U+4?? means include all characters in the range U+400 to U+4FF.

    Examples

    We create a simple HTML containing a single <div> element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, Helvetica, for the text, and a serif font, Times New Roman, for the ampersand.

    <div>Me & You = Us</div>

    In the CSS, you can see that we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that we don't need to download the entire font to get what we want if it is a hosted font, and if it is a local font as in this example, we can at least cut down on extra markup and styles. We could also have done this by wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and rule set.

    @font-face {
      font-family: 'Ampersand';
      src: local('Times New Roman');
      unicode-range: U+26;
    }
    
    div {
      font-size: 4em;
      font-family: Ampersand, Helvetica, sans-serif;	
    }

    Reference result

    What the example should looks like if your browser supports it.

    Live result

    Specifications

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

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 36 [1] (Yes)[2] 9.0 (Yes) (Yes)
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
    Basic support (Yes) 36 [1] 9.0 Not supported 10.0 (Yes)

    [1] Since Gecko 2.0 (Firefox 4), using a unicode-range descriptor doesn't invalidate the @font-face at-rule. The descriptor is ignored and the at-rule is then applied to the whole range of code points. Implementation of this feature is tracked in bug 475891.

    [2] Chrome shipped the unicode-range download optimization in Chrome 36: http://crbug.com/247920.

    See also

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

    Contributors to this page: acdha, myf, chrisdavidmills, kscarfone, Sebastianz, teoli, yisi, finalfantasia
    最終更新者: finalfantasia,