mozilla

Revision 462749 of unicode-range

  • Revision slug: Web/CSS/unicode-range
  • Revision title: unicode-range
  • Revision id: 462749
  • 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.

Initial value U+0-10FFFF
Applies to The @font-face block the property is included inside.
Media {{css_xrefvisual}}
CSS Object Model Property unicodeRange

Syntax

Formal syntax: <urange>#
unicode-range: single codepoint
unicode-range: codepoint range
unicode-range: wildcard range
unicode-range: multiple value declarations

Values

single codepoint
A single unicode character codepoint, for example unicode-range: U+26.
codepoint range
A range of unicode codepoints. So for example, unicode-range: U+0025-00FF means "include all characters in the range U+0025 to U+00FF."
wildcard range
You can specify wildcard characters using the "?" character, so for example unicode-range: U+4?? would mean "include all characters in the range U+400 to U+4FF."
multiple value declarations
You can specify multiple single codepoints and/or codepoint groups, delimiting them using commas. For example, unicode-range: U+00-FF, U+980-9FF.

 

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.

HTML

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

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.

CSS

@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;	
}

Usage

  • As the examples above show, you can use unicode-range to create a custom @font-face that contains only the characters you need to be downloaded, saving on bandwidth.
  • You should always include a fallback font that is acceptable in case your unicode-range @font-face is not supported.
  • 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>&nbsp; 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>
<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>{{css_xrefvisual}}</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;#</pre>
<pre>
<code>unicode-range: single codepoint</code>
<code>unicode-range: codepoint range</code>
<code>unicode-range: wildcard range</code>
<code>unicode-range: multiple value declarations</code></pre>
<h2 id="Values"><span class="mw-headline" id="Values">Values</span></h2>
<div class="css-property">
  <dl>
    <dt>
      <b>single codepoint</b></dt>
    <dd>
      <i>
        A single unicode character codepoint, for example <code>unicode-range: U+26</code>.</i>
    </dd>
  </dl>
</div>
<div class="css-property">
  <dl>
    <dt>
      <b>codepoint range</b></dt>
    <dd>
      <i>
        A range of unicode codepoints. So for example, <code>unicode-range: U+0025-00FF</code> means "include all characters in the range U+0025 to U+00FF."</i>
    </dd>
  </dl>
</div>
<div class="css-property">
  <dl>
    <dt>
      <b>wildcard range</b></dt>
    <dd>
      <i>
        You can specify wildcard characters using the "?" character, so for example <code>unicode-range: U+4??</code> would mean "include all characters in the range U+400 to U+4FF."</i>
    </dd>
  </dl>
</div>
<div class="css-property">
  <dl>
    <dt>
      <b>multiple value declarations</b></dt>
    <dd>
      <i>
        You can specify multiple single codepoints and/or codepoint groups, delimiting them using commas. For example, <code>unicode-range: U+00-FF, U+980-9FF</code>.</i>
    </dd>
  </dl>
</div>
<p>&nbsp;</p>
<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" style="position:relative">
  <p><span class="language">HTML</span></p>
  <pre class="language-markup">
<code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Me &amp; You = Us<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</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" style="position:relative">
  <p><span class="language">CSS</span></p>
  <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="token property">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>
<h2 id="Usage"><span class="mw-headline" id="Usage">Usage</span></h2>
<ul>
  <li>As the examples above show, you can use <code>unicode-range</code> to create a custom <code>@font-face</code> that contains only the characters you need to be downloaded, saving on bandwidth.</li>
  <li>You should always include a fallback font that is acceptable in case your <code>unicode-range @font-face</code> is not supported.</li>
  <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