Skip to content

Commit b1e23c2

Browse files
litherumlitherum
authored
[css-fonts-4] Give clearer advice to authors about font-feature-settings and font-variation-settings (#7815)
This patch does a few things: 1. Fixes a small handful of whitespace / typo problems 2. Adds an example showing how the font-weight descriptor can accept a range 3. Advises authors to use high-level font-variant properties instead of font-feature-settings 4. Rewrites an example to follow the above advice 5. Advises authors to use high-level font properties instead of font-variation-settings
1 parent 5d35584 commit b1e23c2

File tree

1 file changed

+122
-30
lines changed

1 file changed

+122
-30
lines changed

‎css-fonts-4/Overview.bs‎

Lines changed: 122 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1063,7 +1063,7 @@ Font size: the 'font-size' property</h3>
10631063
Inherited: yes
10641064
Percentages: refer to parent element's font size
10651065
Computed value: an absolute length
1066-
Animation type: by computed value type`
1066+
Animation type: by computed value type
10671067
</pre>
10681068

10691069
<wpt>
@@ -2720,8 +2720,8 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
27202720

27212721
<pre>
27222722
@font-face {
2723-
font-family: BaskervilleSimple;
2724-
src: url(baskerville-regular.woff);
2723+
font-family: BaskervilleSimple;
2724+
src: url(baskerville-regular.woff2);
27252725
}
27262726
</pre>
27272727

@@ -2740,14 +2740,14 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
27402740

27412741
<pre>
27422742
@font-face {
2743-
font-family: BaskervilleFull;
2744-
src: url(baskerville-regular.woff);
2743+
font-family: BaskervilleFull;
2744+
src: url(baskerville-regular.woff2);
27452745
}
27462746

27472747
@font-face {
2748-
font-family: BaskervilleFull;
2749-
src: url(baskerville-italic.woff);
2750-
font-style: italic;
2748+
font-family: BaskervilleFull;
2749+
src: url(baskerville-italic.woff2);
2750+
font-style: italic;
27512751
}
27522752
</pre>
27532753

@@ -2767,6 +2767,40 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
27672767
to select a particular face within a font family.
27682768
</div>
27692769

2770+
<div class="example" id="ex-descriptors-range">
2771+
Fonts may advertise the range of 'font-weight!!property', 'font-stretch!!property', and 'font-style!!property' they are
2772+
compatible with.
2773+
<pre>
2774+
@font-face {
2775+
font-family: Lastima;
2776+
src: url(lastima-varfont.woff2);
2777+
font-weight: 100 399;
2778+
}
2779+
</pre>
2780+
The above ''@font-face'' rule indicates that <code>lastima-varfont.woff</code> should be used when
2781+
'font-weight!!property' is between 100 and 399. Depending on if there are any other ''@font-face'' rules which specify
2782+
<code>font-family: Lastima</code>, <code>lastima-varfont.woff</code> might be used for values of 'font-weight!!property'
2783+
outside of the 100 - 399 range. For more details, see the [[#font-matching-algorithm]].
2784+
2785+
As <a href="#ex-descriptors-matching">above</a>, multiple ''@font-face'' rules may be joined together into a single
2786+
family, spanning multiple ranges of 'font-weight!!property', 'font-stretch!!property', and/or 'font-style!!property':
2787+
<pre>
2788+
@font-face {
2789+
font-family: Lastima;
2790+
src: url(lastima-varfont-lightrange.woff2);
2791+
font-weight: 100 399;
2792+
}
2793+
@font-face {
2794+
font-family: Lastima;
2795+
src: url(lastima-varfont-heavyrange.woff2);
2796+
font-weight: 400 700;
2797+
}
2798+
The above ''@font-face'' rules indicate that <code>lastima-varfont-lightrange.woff</code> should be used when
2799+
'font-weight!!property' is between 100 and 399, whereas </code>lastima-varfont-heavyrange.woff</code> should be used when
2800+
'font-weight!!property' is between 400 and 700.
2801+
</pre>
2802+
</div>
2803+
27702804
<!--
27712805
██ ██ ████████ ███ ██ ██ ██████ ████████
27722806
██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██
@@ -5920,20 +5954,57 @@ to font features
59205954
that are not widely used
59215955
but are needed for a particular use case.
59225956

5923-
<p class="advisement">Authors should generally
5924-
use <span title="font-variant!!property">'font-variant!!property'</span>
5925-
and its related subproperties
5926-
whenever possible
5927-
and only use this property
5928-
for special cases
5929-
where its use is the only way
5930-
of accessing
5931-
a particular infrequently used font feature.</p>
5932-
5933-
<div class="example" id="ex-small-caps-swash">
5934-
<p>Enable small caps, and use second swash alternate</p>
5935-
<pre>
5936-
font-feature-settings: "smcp", "swsh" 2;</pre>
5957+
<div class="advisement">Authors should <em>not</em> use
5958+
<span title="font-feature-settings!!property">'font-feature-settings!!property'</span> to set any of the font features in
5959+
the table below. Instead, please use the higher-level replacement properties, because:
5960+
<ol>
5961+
<li>The higher-level properties cascade individually. You can set one without setting the whole 'font-feature-settings!!property' list
5962+
<li>Some higher-level properties can be synthesized for fonts that do not support the font feature.
5963+
</ol>
5964+
<table id="ffs-replacements" class="data">
5965+
<thead>
5966+
<tr>
5967+
<th>If you want to set this font feature
5968+
<th>then use this <em>instead of</em> 'font-feature-settings!!property'
5969+
<th>Notes
5970+
<tbody>
5971+
<tr><td>Kerning (<code>kern</code>) or Vertical Kerning (<code>vkrn</code>)<td>'font-kerning!!property': ''font-kerning/normal''<td>The 'font-kerning!!property' property will set the <code>kern</code> or <code>vkrn</code> feature depending on the 'writing-mode'.
5972+
<tr><td>Standard Ligatures (<code>liga</code>) or Contextual Ligatures (<code>clig</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/common-ligatures''<td>
5973+
<tr><td>Discretionary Ligatures (<code>dlig</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/discretionary-ligatures''<td>
5974+
<tr><td>Historical Ligatures (<code>hlig</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/historical-ligatures''<td>
5975+
<tr><td>Contextual Alternates (<code>calt</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/contextual''<td>
5976+
<tr><td>Subscript (<code>subs</code>)<td>'font-variant-position!!property': ''font-variant-position/sub''<td>
5977+
<tr><td>Superscript (<code>sups</code>)<td>'font-variant-position!!property': ''font-variant-position/super''<td>
5978+
<tr><td>Small Capitals (<code>smcp</code>)<td>'font-variant-caps!!property': ''font-variant-caps/small-caps''<td>
5979+
<tr><td>Small Capitals From Capitals (<code>c2sc</code>)<td>'font-variant-caps!!property': ''font-variant-caps/all-small-caps''<td>
5980+
<tr><td>Petite Capitals (<code>pcap</code>)<td>'font-variant-caps!!property': ''font-variant-caps/petite-caps''<td>
5981+
<tr><td>Petite Capitals From Capitals (<code>c2pc</code>)<td>'font-variant-caps!!property': ''font-variant-caps/all-petite-caps''<td>
5982+
<tr><td>Unicase (<code>unic</code>)<td>'font-variant-caps!!property': ''font-variant-caps/unicase''<td>
5983+
<tr><td>Titling (<code>titl</code>)<td>'font-variant-caps!!property': ''font-variant-caps/titling-caps''<td>
5984+
<tr><td>Lining Figures (<code>lnum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/lining-nums''<td>
5985+
<tr><td>Oldstyle Figures (<code>onum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/oldstyle-nums''<td>
5986+
<tr><td>Proportional Figures (<code>pnum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/proportional-nums''<td>
5987+
<tr><td>Tabular Figures (<code>tnum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/tabular-nums''<td>
5988+
<tr><td>Fractions (<code>frac</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/diagonal-fractions''<td>
5989+
<tr><td>Alternative Fractions (<code>afrc</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/stacked-fractions''<td>
5990+
<tr><td>Ordinals (<code>ordn</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/ordinal''<td>
5991+
<tr><td>Slashed Zero (<code>zero</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/slashed-zero''<td>
5992+
<tr><td>Historical Forms (<code>hist</code>)<td>'font-variant-alternates!!property': ''font-variant-alternates/historical-forms''<td>
5993+
<tr><td>Stylistic Alternates (<code>salt</code>)<td>'font-variant-alternates!!property': ''font-variant-alternates/stylistic()''<td>Define which alternate gets used by making an ''@font-feature-values'' rule
5994+
<tr><td>Character Variant 1 - Character Variant 99 (<code>cv01</code> - <code>cv99</code>)<td>'font-variant-alternates!!property': ''font-variant-alternates/character-variant()''<td>Define which character variant gets used by making an ''@font-feature-values'' rule
5995+
<tr><td>Swash (<code>swsh</code>) or Contextual Swash (<code>cswh</code>)<td>'font-variant-alternates!!property': ''font-variant-alternates/swash()''<td>Define which swash gets used by making an ''@font-feature-values'' rule
5996+
<tr><td>Ornaments (<code>ornm</code>)<td>'font-variant-alternates!!property': ''font-variant-alternates/ornaments()''<td>Define which ornament gets used by making an ''@font-feature-values'' rule
5997+
<tr><td>Alternate Annotation Forms (<code>nalt</code>)<td>'font-variant-alternates!!property': ''font-variant-alternates/annotation()''<td>Define which annotation gets used by making an ''@font-feature-values'' rule
5998+
<tr><td>JIS78 Forms (<code>jp78</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis78''<td>
5999+
<tr><td>JIS83 Forms (<code>jp83</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis83''<td>
6000+
<tr><td>JIS90 Forms (<code>jp90</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis90''<td>
6001+
<tr><td>JIS2004 Forms (<code>jp04</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis04''<td>
6002+
<tr><td>Simplified Forms (<code>smpl</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/simplified''<td>
6003+
<tr><td>Traditional Forms (<code>trad</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/traditional''<td>
6004+
<tr><td>Full Widths (<code>fwid</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/full-width''<td>
6005+
<tr><td>Proportional Widths (<code>pwid</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/proportional-width''<td>
6006+
<tr><td>Ruby Notation Forms (<code>ruby</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/ruby''<td>
6007+
</table>
59376008
</div>
59386009

59396010
<div class="example" id="ex-scientific-inferiors">
@@ -6027,15 +6098,15 @@ any previous value for that axis.</p>
60276098

60286099
<div class="example" id="ex-font-feature-settings-map">
60296100
<pre>
6030-
font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
6031-
font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
6032-
font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
6033-
font-feature-settings: "liga" off; /* liga=0 no common ligatures */
6034-
font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
6035-
font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
6101+
font-feature-settings: "sinf" 1; /* sinf=1 enable Scientific Inferiors */
6102+
font-feature-settings: "sinf" on; /* sinf=1 enable Scientific Inferiors */
6103+
font-feature-settings: 'sinf'; /* sinf=1 enable Scientific Inferiors */
6104+
font-feature-settings: "sinf" off; /* sinf=0 disable Scientific Inferiors */
6105+
font-feature-settings: "sinf", 'twid'; /* sinf=1, twid=1 enable Scientific Inferiors and Third Widths */
6106+
font-feature-settings: "sinf" "twid"; /* invalid, need a comma-delimited list */
60366107
font-feature-settings: "silly" off; /* invalid, tag too long */
60376108
font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
6038-
font-feature-settings: dlig; /* invalid, tag must be a string */
6109+
font-feature-settings: sinf; /* invalid, tag must be a string */
60396110
</pre>
60406111
</div>
60416112

@@ -6578,6 +6649,27 @@ over OpenType or TrueType font variations.
65786649
It is intended as a way of providing access to font variations
65796650
that are not widely used but are needed for a particular use case.
65806651

6652+
<div class="advisement">Authors should <em>not</em> use
6653+
<span title="font-variation-settings!!property">'font-variation-settings!!property'</span> to set any of the variation axes in
6654+
the table below. Instead, please use the higher-level replacement properties, because:
6655+
<ol>
6656+
<li>The higher-level properties cascade individually. You can set one without setting the whole 'font-variation-settings!!property' list
6657+
<li>Some higher-level properties can be synthesized for fonts that do not support the font variation.
6658+
</ol>
6659+
<table id="fvs-replacements" class="data">
6660+
<thead>
6661+
<tr>
6662+
<th>If you want to set this variation axis
6663+
<th>then use this <em>instead of</em> 'font-variation-settings!!property'
6664+
<th>Notes
6665+
<tbody>
6666+
<tr><td>Weight (<code>wght</code>)<td>'font-weight!!property'<td>The 'font-weight!!property' property will set the <code>wght</code> axis if one is present.
6667+
<tr><td>Width (<code>wdth</code>)<td>'font-stretch!!property'<td>The 'font-stretch!!property' property will set the <code>wdth</code> axis if one is present.
6668+
<tr><td>Slant (<code>slnt</code>) or Italic (<code>ital</code>)<td>'font-style!!property'<td>The 'font-style!!property' property will set the <code>slnt</code> or <code>ital</code> axis, depending on its value.
6669+
<tr><td>Optical size (<code>opsz</code>)<td>'font-optical-sizing!!property'<td>The 'font-optical-sizing!!property' property will set the <code>opsz</code> axis if one is present.
6670+
</table>
6671+
</div>
6672+
65816673
The use of font variation settings
65826674
does not affect font selection
65836675
where a fallback font is to be used,
@@ -6986,7 +7078,7 @@ User-defined font color palettes: The ''@font-palette-values'' rule</h3>
69867078

69877079
Note: In the case where a family name is shared
69887080
between multiple physical fonts,
6989-
(such as when a compound font is created, using `unicode-range`),
7081+
(such as when a compound font is created, using 'unicode-range!!descriptor'),
69907082
and if those fonts have different palettes,
69917083
the result of specifying a partial palette
69927084
using ''@font-palette-values''

0 commit comments

Comments
 (0)