unicode-range

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

Revision Content

The unicode-range CSS descriptor allows you to set a 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 @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 @font-face is not supported and the whole at-rule being invalid.

Initial value U+0-10FFFF
Applies to The @font-face block the property is included inside.
Media {{cssmediadef("animation", "visual")}}
CSS Object Model Property 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 codepoint, for example U+26.
codepoint_range
A range of unicode codepoints. So for example, U+0025-00FF means "include all characters in the range U+0025 to U+00FF."
wildcard_range
A range of unicode codepoints 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

View live example. A single paragraph of HTML, including an ampersand. We have wrapped the ampersand in a <span> element because we want to use a different ampersand from a different font.

<p>Me <span>&</span> You = Us</>

The CSS for the example above: 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 do this by wrapping the ampersand in a <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;
}

p {
  color: #faf;
  letter-spacing: -0.05em;
  font-size: 64px;
  font-family: Ampersand, Helvetica, sans-serif;	
}

Specifications

Specification Status Comment
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} {{Spec2('CSS3 Fonts')}} Inital definition

Browser compatibility

{{CompatibilityTable}}

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

See also

Revision Source

<p>The <strong><code>unicode-range</code></strong> CSS descriptor allows you to set a 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 <code>@font-face</code> 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 <code>@font-face</code> is not supported and the whole at-rule being invalid.</p>
</div>
<table class="wikitable overview_table">
  <tbody>
    <tr>
      <th>Initial value</th>
      <td><code>U+0-10FFFF</code></td>
    </tr>
    <tr>
      <th>Applies to</th>
      <td>The <code>@font-face</code> block the property is included inside.</td>
    </tr>
    <tr>
      <th>Media</th>
      <td>{{cssmediadef("animation", "visual")}}</td>
    </tr>
    <tr>
      <th>CSS Object Model Property</th>
      <td><code>unicodeRange</code></td>
    </tr>
  </tbody>
</table>
<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 codepoint, for example <code>U+26</code>.</dd>
  <dt>
    <em><b>codepoint_range</b></em></dt>
  <dd>
    A range of unicode codepoints. So for example, <code>U+0025-00FF</code> means "include all characters in the range <code>U+0025</code> to <code>U+00FF</code>."</dd>
  <dt>
    <em><b>wildcard_range</b></em></dt>
  <dd>
    A range of unicode codepoints containing wildcard characters, that is using the <code>'?'</code> character, so for example <code>U+4??</code> means "include all characters in the range <code>U+400</code> to <code>U+4FF</code>."</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p><a href="http://code.webplatform.org/gist/6366676" rel="nofollow">View live example</a>. A single paragraph of HTML, including an ampersand. We have wrapped the ampersand in a <code>&lt;span&gt;</code> element because we want to use a different ampersand from a different font.</p>
<div class="example">
  <pre class="brush: html">
<code>&lt;p&gt;Me &lt;span&gt;&amp;&lt;/span&gt; You = Us&lt;/&gt;</code></pre>
</div>
<p>The CSS for the example above: you can see that we are in effect defining a completely separate <code>@font-face</code> 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 do this by wrapping the ampersand in a <code>&lt;span&gt;</code> 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;
}

p {
  color: #faf;
  letter-spacing: -0.05em;
  font-size: 64px;
  font-family: Ampersand, Helvetica, sans-serif;	
}
</code></pre>
</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', '#font-face-rule', '@font-face')}}</td>
      <td>{{Spec2('CSS3 Fonts')}}</td>
      <td>Inital 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}}</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}}</td>
        <td>9.0</td>
        <td>{{CompatNo}}</td>
        <td>10.0</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
Revert to this revision