unicode-range

  • Revision slug: Web/CSS/unicode-range
  • Revision title: unicode-range
  • Revision id: 462831
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{SeeCompatTable}}

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

This descriptor can be used to make a custom {{cssxref("@font-face")}} contains only the characters that needs to be downloaded, saving on bandwidth.

Note: Web developer should always include a fallback font that is acceptable in case the unicode-range descriptor {{cssxref("@font-face")}} is not supported and the whole at-rule being invalid.

  • Initial valueU+0-10FFFF
  • Usagein a {{cssxref("@font-face")}} at-rule
  • Mediavisual
  • CSSOM property{{domxref("CSSFontFaceRule.unicodeRange")}}

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 single paragraph of HTML, 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 {{cssxref("@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 {{HTMLElement("span")}} and applying a different font just to that, but that is an extra element and ruleset.

@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

{{EmbedLiveSample("Examples", 500,104)}}

Specifications

Specification Status Comment
{{SpecName('CSS3 Fonts', '#descdef-unicode-range', 'unicode-range')}} {{Spec2('CSS3 Fonts')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{CompatNo}} [1] {{CompatVersionUnknown}} 9.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatNo}} [1] 9.0 {{CompatNo}} 10.0 {{CompatVersionUnknown}}

[1] Since {{Gecko("2.0")}} (Firefox 4), using a unicode-range descriptor doesn't invalidate the {{cssxref("@font-face")}} at-rule. The descriptor is ignored and the at-rule is then applied to the whole range of code points.

See also

  • Font-related properties: {{CSS_Reference:Fonts}}.

Revision Source

<p>{{SeeCompatTable}}</p>
<p>The <strong><code>unicode-range</code></strong> CSS descriptor sets the specific range of characters to be downloaded from a font defined by {{cssxref("@font-face")}} and made available for use on the current page.</p>
<p>This descriptor can be used to make a custom {{cssxref("@font-face")}} contains only the characters that needs to be downloaded, saving on bandwidth.</p>
<div class="note">
  <p><strong>Note:</strong> Web developer should always include a fallback font that is acceptable in case the <code>unicode-range</code> descriptor {{cssxref("@font-face")}} is not supported and the whole at-rule being invalid.</p>
</div>
<ul class="cssprop">
  <li><dfn>Initial value</dfn><code>U+0-10FFFF</code></li>
  <li><dfn>Usage</dfn>in a {{cssxref("@font-face")}} <a href="/en-US/docs/Web/CSS/At-rule" title="/en-US/docs/Web/CSS/At-rule">at-rule</a></li>
  <li><dfn>Media</dfn><code><a href="/en-US/docs/Web/CSS/media/visual" title="/en-US/docs/Web/CSS/media/visual">visual</a></code></li>
  <li><dfn>CSSOM property</dfn>{{domxref("CSSFontFaceRule.unicodeRange")}}</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal syntax: &lt;urange&gt;#
        where: &lt;urange&gt; = <em>single_codepoint</em> | <em>codepoint_range</em> | <em>wildcard_range</em>
</pre>
<pre>
<code>unicode-range: U+26               /* single_codepoint */</code>
<code>unicode-range: <code>U+0025-00FF        /* </code>codepoint_range */</code>
<code>unicode-range: <code>U+4??              /* </code>wildcard_range</code> */
<code>unicode-range: <code><code>U+0025-00FF, </code></code><code><code>U+4?? /* </code></code>multiple values can be separated by commas */</code></pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <em><b>single_codepoint</b></em></dt>
  <dd>
    A single unicode character code point, for example <code>U+26</code>.</dd>
  <dt>
    <em><b>codepoint_range</b></em></dt>
  <dd>
    A range of unicode code points. So for example, <code>U+0025-00FF</code> means <em>include all characters in the range <code>U+0025</code> to <code>U+00FF</code></em>.</dd>
  <dt>
    <em><b>wildcard_range</b></em></dt>
  <dd>
    A range of unicode code points containing wildcard characters, that is using the <code>'?'</code> character, so for example <code>U+4??</code> means <em>include all characters in the range <code>U+400</code> to <code>U+4FF</code></em>.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>We create a single paragraph of HTML, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, <em>Helvetica</em>, for the text, and a serif font, <em>Times New Roman</em>, for the ampersand.</p>
<div class="example">
  <pre class="brush: html">
<code>&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</code></pre>
</div>
<p>In the CSS, you can see that we are in effect defining a completely separate {{cssxref("@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 {{HTMLElement("span")}} and applying a different font just to that, but that is an extra element and ruleset.</p>
<div class="example">
  <pre class="brush: css">
<code>@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;	
}
</code></pre>
  <h3 id="Reference_result">Reference result</h3>
  <p><img alt="What the example should looks like if your browser supports it." src="https://mdn.mozillademos.org/files/6043/Refresult.png" style="width: 480px; height: 104px;" /></p>
  <h3 id="Live_result">Live result</h3>
  <p>{{EmbedLiveSample("Examples", 500,104)}}</p>
</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Fonts', '#descdef-unicode-range', 'unicode-range')}}</td>
      <td>{{Spec2('CSS3 Fonts')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatNo}} [1]</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>9.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatNo}} [1]</td>
        <td>9.0</td>
        <td>{{CompatNo}}</td>
        <td>10.0</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Since {{Gecko("2.0")}} (Firefox 4), using a <code>unicode-range</code> descriptor doesn't invalidate the {{cssxref("@font-face")}} at-rule. The descriptor is ignored and the at-rule is then applied to the whole range of code points.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>Font-related properties: {{CSS_Reference:Fonts}}.</li>
</ul>
Revert to this revision