Revision 1014371 of unicode-range

<div>{{cssref}}</div>

<h2 id="Summary">Summary</h2>

<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>The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* &lt;unicode-range&gt; values */
unicode-range: U+26;                 /* single codepoint */
unicode-range: U+0-7F;
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 */

/* Global values */
unicode-range: inherit;
unicode-range: initial;
unicode-range: unset;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><em><strong>single codepoint</strong></em></dt>
 <dd>A single Unicode character code point, for example <code>U+26</code>.</dd>
 <dt><em><strong>codepoint range</strong></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><strong>wildcard range</strong></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>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<p>We create a simple HTML containing a single {{HTMLElement("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, <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 rule set.</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="height:104px; width:480px" /></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-font-face-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>{{CompatGeckoDesktop(44)}} [1]</td>
   <td>{{CompatVersionUnknown}}[2]</td>
   <td>9.0 [2]</td>
   <td>{{CompatVersionUnknown}} [2]</td>
   <td>{{CompatVersionUnknown}} [2]</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>{{CompatGeckoMobile(44)}} [1]</td>
   <td>9.0</td>
   <td>{{CompatNo}}</td>
   <td>10.0</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] From Firefox 4 through Firefox 34, the <code>unicode-range</code> descriptor in {{cssxref("@font-face")}} rules was parsed but the codepoint range ignored. From Firefox 35,&nbsp;<code>unicode-range</code> can be enabled on non-Linux platforms using the <code>layout.css.unicode-range.enabled</code> pref, which was on by default in nightly/developer builds. On Linux, this was possible from Firefox 41 onwards.</p>

<p>[2] Firefox and Chrome respect the <code>unicode-range</code> value when deciding which fonts to download (from Chrome 36, <a href="https://crbug.com/247920">https://crbug.com/247920</a>). Safari and Internet Explorer ignore the unicode-range value when deciding which fonts to download but respect it when deciding which font to use.</p>