unicode-range

  • Revision slug: Web/CSS/unicode-range
  • Revision title: unicode-range
  • Revision id: 462767
  • 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 exampleA 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!)

Be aware that Firefox does not yet support unicode-range properly, hence the reason for the second @font-face block. Here we are pointing to an obscure unicode codepoint that will likely never be used in our document, causing Firefox to stop applying the posh Eccentric font to the whole paragraph (definitely not what we want.) — just helvetica is a better fallback.

@font-face {
  font-family: 'Ampersand';
  src: local('Eccentric STD');
  unicode-range: U+26;
}

@font-face {
    /* Ampersand fallback font */
    font-family: 'Ampersand';
    src: local('helvetica');
    unicode-range: U+270C;
}

p {
	color: #faf;
	letter-spacing: -0.05em;
	font-size: 64px;
	font-family: Ampersand, helvetica, sans-serif;	
}
  • Support for unicode-range is currently limited; Chrome and Safari supports it well, Internet Explorer supports is as of version 9, Opera supports it, Firefox doesn't support it.

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"><span class="mw-headline" id="Syntax">Syntax</span></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"><span class="mw-headline" id="Values">Values</span></h3>
<div class="css-property">
  <dl>
    <dt>
      <em><b>single_codepoint</b></em></dt>
    <dd>
      A single unicode character codepoint, for example <code>U+26</code>.</dd>
  </dl>
</div>
<div class="css-property">
  <dl>
    <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>
  </dl>
</div>
<div class="css-property">
  <dl>
    <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>
</div>
<h2 id="Examples"><span class="mw-headline" id="Examples">Examples</span></h2>
<p><a class="external text" 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>
<p>Be aware that Firefox does not yet support <code>unicode-range</code> properly, hence the reason for the second <code>@font-face</code> block. Here we are pointing to an obscure unicode codepoint that will likely never be used in our document, causing Firefox to stop applying the posh Eccentric font to the whole paragraph (definitely not what we want.) — just helvetica is a better fallback.</p>
<div class="example">
  <pre class="language-css">
<code class="language-css"><span class="token atrule">@font-face</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Ampersand'</span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> local(<span class="token string">'Eccentric STD'</span>)<span class="token punctuation">;</span>
  <span class="brush: css">unicode-range</span><span class="token punctuation">:</span> U+26<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule">@font-face</span> <span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">/* Ampersand fallback font */</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Ampersand'</span><span class="token punctuation">;</span>
    <span class="token property">src</span><span class="token punctuation">:</span> local(<span class="token string">'helvetica'</span>)<span class="token punctuation">;</span>
    <span class="token property">unicode-range</span><span class="token punctuation">:</span> U+270C<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">p </span><span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span> #faf<span class="token punctuation">;</span>
	<span class="token property">letter-spacing</span><span class="token punctuation">:</span> -0.05em<span class="token punctuation">;</span>
	<span class="token property">font-size</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
	<span class="token property">font-family</span><span class="token punctuation">:</span> Ampersand, helvetica, sans-serif<span class="token punctuation">;</span>	
<span class="token punctuation">}</span>
</code></pre>
</div>
<ul>
  <li>Support for <code>unicode-range</code> is currently limited; Chrome and Safari supports it well, Internet Explorer supports is as of version 9, Opera supports it, Firefox
    <i>
      doesn't</i>
    support it.</li>
</ul>
Revert to this revision