[css-fonts-4] Port over more @font-face descriptors from level 3

Author: litherum

css-fonts-4/Overview.bs

@@ -1261,7 +1261,7 @@ Using CSS font matching rules,
 a user agent can selectively download
 only those faces that are needed for a given piece of text.
 
-It's syntax is:
+Its syntax is:
 
 <pre class=prod>
 @font-face {
@@ -1707,6 +1707,350 @@ as well as the values supported by the font file itself.
 	to select a particular face within a font family.
 </div>
 
+<h3 id="unicode-range-desc">
+Character range: the 'unicode-range' descriptor</h3>
+
+<pre class='descdef'>
+Name: unicode-range
+Value: <<urange>> #
+Initial: U+0-10FFFF
+For: @font-face
+</pre>
+
+This descriptor defines the set of Unicode codepoints that may be
+supported by the font face for which it is declared. The descriptor
+value is a comma-delimited list of Unicode range (<<urange>>)
+values. The union of these ranges defines the set of codepoints that
+serves as a hint for user agents when deciding whether or not to
+download a font resource for a given text run.
+
+Each <<urange>> value is a
+<a href="https://www.w3.org/TR/CSS21/syndata.html#tokenization"><code title="UNICODE-RANGE token">UNICODE-RANGE</code></a>
+token made up of a "U+" or "u+" prefix
+followed by a codepoint range in one of the three forms listed below.
+Ranges that do not fit one of the these forms are invalid
+and cause the declaration to be ignored.
+
+<dl>
+  <dt>single codepoint (e.g. U+416)</dt>
+  <dd>a Unicode codepoint, represented as one to six hexadecimal digits</dd>
+  <dt>interval range (e.g. U+400-4ff)</dt>
+  <dd>represented as two hyphen-separated Unicode codepoints
+    indicating the inclusive start and end codepoints of a range</dd>
+  <dt>wildcard range (e.g. U+4??)</dt>
+  <dd>defined by the set of codepoints implied when
+      trailing '?' characters signify any hexadeximal digit</dd>
+</dl>
+
+Individual codepoints are written using hexadecimal values that correspond to
+<a href="https://www.unicode.org/charts/">Unicode character codepoints</a>.
+Unicode codepoint values must be between 0 and 10FFFF inclusive. Digit
+values of codepoints are ASCII case-insensitive. For interval ranges,
+the start and end codepoints must be within the range noted above and
+the end codepoint must be greater than or equal to the start
+codepoint.
+
+Wildcard ranges specified with ‘?’ that lack an
+initial digit (e.g. "U+???") are valid and equivalent
+to a wildcard range with an initial zero digit (e.g. "U+0???" = "U+0000-0FFF").
+Wildcard ranges that extend beyond the range of
+Unicode codepoints are invalid. Because of this, the maximum
+number of trailing '?' wildcard characters is five, even though the
+<a href="https://www.w3.org/TR/CSS21/syndata.html#tokenization"><code title="UNICODE-RANGE token">UNICODE-RANGE</code></a>
+token accepts six.
+
+Within the comma-delimited list of Unicode ranges in a
+'unicode-range' descriptor declaration, ranges may overlap. The union
+of these ranges defines the set of codepoints for which the
+corresponding font may be used. User agents must not download or use
+the font for codepoints outside this set. User agents may normalize
+the list of ranges into a list that is different but represents the
+same set of codepoints.
+
+The associated font might not contain glyphs for the entire set of
+codepoints defined by the 'unicode-range' descriptor. When the font
+is used, the <dfn>effective character map</dfn> is the intersection of the
+codepoints defined by 'unicode-range' with the font's <em>character map</em>.
+This allows authors to define supported ranges in terms of broad
+ranges without worrying about the precise codepoint ranges supported
+by the underlying font.
+
+<h4 id="composite-fonts">Using character ranges to define composite fonts</h4>
+
+Multiple <code>@font-face</code> rules with different unicode ranges for the same
+family and style descriptor values can be used to create composite fonts
+that mix the glyphs from different fonts for different scripts. This
+can be used to combine fonts that only contain glyphs for a single
+script (e.g. Latin, Greek, Cyrillic) or it can be used by authors as a
+way of segmenting a font into fonts for commonly used characters and
+less frequently used characters. Since the user agent will only pull
+down the fonts it needs this helps reduce page bandwidth.
+
+If the unicode ranges overlap for a set of <code>@font-face</code> rules with the
+same family and style descriptor values, the rules are ordered in the
+reverse order they were defined; the last rule defined is the first to
+be checked for a given character.
+
+Example ranges for specific languages or characters:
+
+<dl>
+  <dt>unicode-range: U+A5;</dt>
+  <dd>a single code point, the yen/yuan symbol</dd>
+
+  <dt>unicode-range: U+0-7F;</dt>
+  <dd>code range for basic ASCII characters</dd>
+
+  <dt>unicode-range: U+590-5ff;</dt>
+  <dd>code range for Hebrew characters</dd>
+
+  <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;</dt>
+  <dd>code range for Japanese kanji, hiragana and katakana characters plus yen/yuan symbol</dd>
+</dl>
+
+<div class="example">
+	The BBC provides news services in a wide variety of languages, many
+	that are not well supported across all platforms. Using an <code>@font-face</code>
+	rule, the BBC could provide a font for any of these languages, as it
+	already does via a manual font download.</p>
+<pre>
+@font-face {
+  font-family: BBCBengali;
+  src: url(fonts/BBCBengali.woff) format("woff");
+  unicode-range: U+00-FF, U+980-9FF;
+}
+</pre>
+</div>
+
+<div class="example">
+	Technical documents often require a wide range of symbols.  The STIX
+	Fonts project is one project aimed at providing fonts to support a wide
+	range of technical typesetting in a standardized way.  The example below
+	shows the use of a font that provides glyphs for many of the
+	mathematical and technical symbol ranges within Unicode:
+<pre>
+@font-face {
+  font-family: STIXGeneral;
+  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
+  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
+}
+</pre>
+</div>
+
+<div class="example">
+	This example shows how an author can override the glyphs used for
+	Latin characters in a Japanese font with glyphs from a different font.
+	The first rule specifies no range so it defaults to the entire range.
+	The range specified in the second rule overlaps but takes precedence
+	because it is defined later.
+
+<pre>
+@font-face {
+  font-family: JapaneseWithGentium;
+  src: local(MSMincho);
+  /* no range specified, defaults to entire range */
+}
+
+@font-face {
+  font-family: JapaneseWithGentium;
+  src: url(../fonts/Gentium.woff);
+  unicode-range: U+0-2FF;
+}
+</pre>
+</div>
+
+<div class="example">
+	Consider a family constructed to optimize bandwidth by separating out
+	Latin, Japanese and other characters into different font files:
+
+<pre>
+/* fallback font - size: 4.5MB */
+@font-face {
+  font-family: DroidSans;
+  src: url(DroidSansFallback.woff);
+  /* no range specified, defaults to entire range */
+}
+
+/* Japanese glyphs - size: 1.2MB */
+@font-face {
+  font-family: DroidSans;
+  src: url(DroidSansJapanese.woff);
+  unicode-range: U+3000-9FFF, U+ff??;
+}
+
+/* Latin, Greek, Cyrillic along with some
+   punctuation and symbols - size: 190KB */
+@font-face {
+  font-family: DroidSans;
+  src: url(DroidSans.woff);
+  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
+}
+</pre>
+
+	For simple Latin text, only the font for Latin characters is downloaded:
+
+<pre>
+body { font-family: DroidSans; }
+
+&lt;p>This is that&lt;/p>
+</pre>
+
+	In this case the user agent first checks the unicode-range for the
+	font containing Latin characters (DroidSans.woff).  Since all the
+	characters above are in the range U+0-5FF, the user agent downloads the
+	font and renders the text with that font.
+
+	Next, consider text that makes use of an arrow character (&#x21e8;):
+
+<pre>
+&lt;p>This &amp;#x21e8; that&lt;p>
+</pre>
+
+	The user agent again first checks the unicode-range of the font
+	containing Latin characters. Since U+2000-2300 includes the arrow
+	code point (U+21E8), the user agent downloads the font. For this
+	character however the Latin font does not have a matching glyph, so the
+	effective unicode-range used for font matching excludes this code point.
+	Next, the user agent evaluates the Japanese font. The unicode-range for
+	the Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so
+	the user agent does not download the Japanese font.
+	Next the fallback font is considered. The <code>@font-face</code> rule for the
+	fallback font does not define unicode-range so its value defaults to
+	the range of all Unicode code points. The fallback font is downloaded and
+	used to render the arrow character.
+
+</div>
+
+<h3 id="font-rend-desc">
+Font features: the 'font-variant' and 'font-feature-settings' descriptors</h3>
+
+<pre class='descdef'>
+Name: font-variant
+Value: normal | none | [ <<common-lig-values>> || <<discretionary-lig-values>> || <<historical-lig-values>> ||
+        <<contextual-alt-values>> || <var title="stylistic">stylistic(<<feature-value-name>>)</var> || <var>historical-forms</var> ||
+        <var>styleset(<<feature-value-name>> #)</var> ||
+        <var>character-variant(<<feature-value-name>> #)</var> ||
+        <var>swash(<<feature-value-name>>)</var> || <var>ornaments(<<feature-value-name>>)</var> ||
+        <var>annotation(<<feature-value-name>>)</var> ||
+        [ <i>small-caps</i> | <i>all-small-caps</i> | <i>petite-caps</i> | <i>all-petite-caps</i> | <i>unicase</i> | <i>titling-caps</i> ] ||
+        <<numeric-figure-values>> || <<numeric-spacing-values>> || <<numeric-fraction-values>> || <i>ordinal</i> || <i>slashed-zero</i> ||
+        <<east-asian-variant-values>> || <<east-asian-width-values>> || <i>ruby</i> ||
+        [ <i>sub</i> | <i>super</i> ] ]
+Initial: normal
+For: @font-face
+</pre>
+
+<pre class='descdef'>
+Name: font-feature-settings
+Value: normal | <<feature-tag-value>> #
+Initial: normal
+For: @font-face
+</pre>
+
+These descriptors define initial settings that apply when the font defined by
+an <code>@font-face</code> rule is rendered.  They do not affect font selection.
+Values are identical to those defined for the corresponding
+'font-variant' and 'font-feature-settings' properties defined below
+except that the value 'inherit' is omitted.  When multiple font
+feature descriptors or properties are used, the cumulative effect on
+text rendering is detailed in the section
+<a href="#font-feature-resolution">Font Feature Resolution</a> below.
+In cases where specific values define synthesized fallback for certain
+'font-variant' subproperties, the same synthesized fallback
+applies when used within those values are used with the
+'font-variant' descriptor.
+
+<h4 id="font-face-loading">Font loading guidelines</h4>
+
+The <code>@font-face</code> rule is designed to allow lazy loading
+of font resources that are only downloaded when used within a
+document.  A stylesheet can include <code>@font-face</code> rules for
+a library of fonts of which only a select set are used; user agents
+must only download those fonts that are referred to within the style
+rules applicable to a given page.  User agents that download all fonts
+defined in <code>@font-face</code> rules without considering whether
+those fonts are in fact used within a page are considered
+non-conformant. In cases where a font might be downloaded in character
+fallback cases, user agents may download a font if it's contained within
+the computed value of <span title="font-family!!property">'font-family'</span>
+for a given text run.
+
+<pre>
+@font-face {
+  font-family: GeometricModern;
+  src: url(font.woff);
+}
+
+p {
+  /* font will be downloaded for pages with p elements */
+  font-family: GeometricModern, sans-serif;
+}
+
+h2 {
+  /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
+  font-family: Futura, GeometricModern, sans-serif;
+}
+</pre>
+
+In cases where textual content is loaded before downloadable fonts
+are available, user agents may render text as it would be rendered if
+downloadable font resources are not available or they may render text
+transparently with fallback fonts to avoid a flash of text using a
+fallback font.  In cases where the font download fails user agents must
+display text, simply leaving transparent text is considered
+non-conformant behavior.  Authors are advised to use fallback fonts in
+their font lists that closely match the metrics of the
+downloadable fonts to avoid large page reflows where possible.
+
+<a id="same-origin-restriction">
+<a id="allowing-cross-origin-font-loading">
+<h4 id="font-fetching-requirements">Font fetching requirements</h4>
+
+For font loads, user agents must use the
+<a href="https://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially CORS-enabled fetch</a>
+method defined by the [[!HTML5]] specification for URL's defined
+within @font-face rules. When fetching, user agents must use
+"Anonymous" mode, set the referrer source to the stylesheet's URL and
+set the origin to the URL of the containing document.
+
+Note: The implications of this for authors are that fonts
+will typically not be loaded cross-origin unless authors specifically
+takes steps to permit cross-origin loads. Sites can explicitly allow
+cross-site loading of font data using the <code>Access-Control-Allow-Origin</code>
+HTTP header.  For other schemes, no explicit mechanism to allow
+cross-origin loading, beyond what is permitted by the
+<a href="https://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially CORS-enabled fetch</a>
+method, is defined or required.
+
+<div class="example">
+	For the examples given below, assume that a document is located at
+	<code>https://example.com/page.html</code> and all URL's link to valid
+	font resources supported by the user agent.
+
+	Fonts defined with the 'src' descriptor values below will be loaded:
+
+<pre>/* same origin (i.e. domain, scheme, port match document) */
+src: url(fonts/simple.woff);
+
+/* data url's with no redirects are treated as same origin */
+src: url("data:application/font-woff;base64,...");
+
+/* cross origin, different domain */
+/* Access-Control-Allow-Origin response header set to '*' */
+src: url(http://another.example.com/fonts/simple.woff);
+</pre>
+
+	Fonts defined with the 'src' descriptor values below will fail to load:
+
+<pre>/* cross origin, different scheme */
+/* no Access-Control-xxx headers in response */
+src: url(https://example.com/fonts/simple.woff);
+
+/* cross origin, different domain */
+/* no Access-Control-xxx headers in response */
+src: url(http://another.example.com/fonts/simple.woff);
+</pre>
+</div>
+
 <h3 id="font-display-desc">
 Controlling Font Display Per Font-Face: the 'font-display' descriptor</h3>