Skip to content

[css-fonts-4] Give clearer advice to authors about font-feature-settings and font-variation-settings #7815

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 3, 2022
Merged

[css-fonts-4] Give clearer advice to authors about font-feature-settings and font-variation-settings #7815

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6d7620
[css-fonts-4] Give clearer advice to authors about font-feature-setti…
litherum Oct 1, 2022
21ec449
Addressing review comments
litherum Oct 3, 2022
f8b9fba
Addressing review comment
litherum Oct 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 123 additions & 31 deletions css-fonts-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1063,7 +1063,7 @@ Font size: the 'font-size' property</h3>
Inherited: yes
Percentages: refer to parent element's font size
Computed value: an absolute length
Animation type: by computed value type`
Animation type: by computed value type
</pre>

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

<pre>
@font-face {
font-family: BaskervilleSimple;
src: url(baskerville-regular.woff);
font-family: BaskervilleSimple;
src: url(baskerville-regular.woff);
}
</pre>

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

<pre>
@font-face {
font-family: BaskervilleFull;
src: url(baskerville-regular.woff);
font-family: BaskervilleFull;
src: url(baskerville-regular.woff);
}

@font-face {
font-family: BaskervilleFull;
src: url(baskerville-italic.woff);
font-style: italic;
font-family: BaskervilleFull;
src: url(baskerville-italic.woff);
font-style: italic;
}
</pre>

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

<div class="example" id="ex-descriptors-range">
Fonts may advertise the range of 'font-weight!!property', 'font-stretch!!property', and 'font-style!!property' they are
compatible with.
<pre>
@font-face {
font-family: Lastima;
src: url(lastima-varfont.woff);
font-weight: 100 399;
}
</pre>
The above ''@font-face'' rule indicates that <code>lastima-varfont.woff</code> should be used when
'font-weight!!property' is between 100 and 399. Depending on if there are any other ''@font-face'' rules which specify
<code>font-family: Lastima</code>, <code>lastima-varfont.woff</code> might be used for values of 'font-weight!!property'
outside of the 100 - 399 range. For more details, see the [[#font-matching-algorithm]].

As <a href="#ex-descriptors-matching">above</a>, multiple ''@font-face'' rules may be joined together into a single
family, spanning multiple ranges of 'font-weight!!property', 'font-stretch!!property', and/or 'font-style!!property':
<pre>
@font-face {
font-family: Lastima;
src: url(lastima-varfont-lightrange.woff);
font-weight: 100 399;
}
@font-face {
font-family: Lastima;
src: url(lastima-varfont-heavyrange.woff);
font-weight: 400 700;
}
The above ''@font-face'' rule indicates that <code>lastima-varfont-lightrange.woff</code> should be used when
'font-weight!!property' is between 100 and 399, whereas </code>lastima-varfont-heavyrange.woff</code> should be used when
'font-weight!!property' is between 400 and 700.
</pre>
</div>

<!--
██ ██ ████████ ███ ██ ██ ██████ ████████
██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██
Expand Down Expand Up @@ -5920,21 +5954,58 @@ to font features
that are not widely used
but are needed for a particular use case.

<p class="advisement">Authors should generally
use <span title="font-variant!!property">'font-variant!!property'</span>
and its related subproperties
whenever possible
and only use this property
for special cases
where its use is the only way
of accessing
a particular infrequently used font feature.</p>

<div class="example" id="ex-small-caps-swash">
<p>Enable small caps, and use second swash alternate</p>
<pre>
font-feature-settings: "smcp", "swsh" 2;</pre>
</div>
<p class="advisement">Authors should <em>not</em> use
<span title="font-feature-settings!!property">'font-feature-settings!!property'</span> to set any of the font features in
the table below. Instead, please use the higher-level replacement properties, because:
<ol>
<li>The higher-level properties cascade individually. You can set one without setting the whole 'font-feature-settings!!property' list
<li>Some higher-level properties can be synthesized for fonts that do not support the font feature.
</ol>
<table id="ffs-replacements" class="data">
<thead>
<tr>
<th>If you want to set this font feature
<th>then use this <em>instead of</em> 'font-feature-settings!!property'
<th>Notes
<tbody>
<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'.
<tr><td>Standard Ligatures (<code>liga</code>) or Contextual Ligatures (<code>clig</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/common-ligatures''<td>
<tr><td>Discretionary Ligatures (<code>dlig</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/discretionary-ligatures''<td>
<tr><td>Historical Ligatures (<code>hlig</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/historical-ligatures''<td>
<tr><td>Contextual Alternates (<code>calt</code>)<td>'font-variant-ligatures!!property': ''font-variant-ligatures/contextual''<td>
<tr><td>Subscript (<code>subs</code>)<td>'font-variant-position!!property': ''font-variant-position/sub''<td>
<tr><td>Superscript (<code>sups</code>)<td>'font-variant-position!!property': ''font-variant-position/super''<td>
<tr><td>Small Capitals (<code>smcp</code>)<td>'font-variant-caps!!property': ''font-variant-caps/small-caps''<td>
<tr><td>Small Capitals From Capitals (<code>c2sc</code>)<td>'font-variant-caps!!property': ''font-variant-caps/all-small-caps''<td>
<tr><td>Petite Capitals (<code>pcap</code>)<td>'font-variant-caps!!property': ''font-variant-caps/petite-caps''<td>
<tr><td>Petite Capitals From Capitals (<code>c2pc</code>)<td>'font-variant-caps!!property': ''font-variant-caps/all-petite-caps''<td>
<tr><td>Unicase (<code>unic</code>)<td>'font-variant-caps!!property': ''font-variant-caps/unicase''<td>
<tr><td>Titling (<code>titl</code>)<td>'font-variant-caps!!property': ''font-variant-caps/titling-caps''<td>
<tr><td>Lining Figures (<code>lnum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/lining-nums''<td>
<tr><td>Oldstyle Figures (<code>onum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/oldstyle-nums''<td>
<tr><td>Proportional Figures (<code>pnum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/proportional-nums''<td>
<tr><td>Tabular Figures (<code>tnum</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/tabular-nums''<td>
<tr><td>Fractions (<code>frac</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/diagonal-fractions''<td>
<tr><td>Alternative Fractions (<code>afrc</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/stacked-fractions''<td>
<tr><td>Ordinals (<code>ordn</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/ordinal''<td>
<tr><td>Slashed Zero (<code>zero</code>)<td>'font-variant-numeric!!property': ''font-variant-numeric/slashed-zero''<td>
<tr><td>Historical Forms (<code>hist</code>)<td>'font-variant-alternates!!property': ''font-variant-alternates/historical-forms''<td>
<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
<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
<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
<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
<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
<tr><td>JIS78 Forms (<code>jp78</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis78''<td>
<tr><td>JIS83 Forms (<code>jp83</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis83''<td>
<tr><td>JIS90 Forms (<code>jp90</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis90''<td>
<tr><td>JIS2004 Forms (<code>jp04</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/jis04''<td>
<tr><td>Simplified Forms (<code>smpl</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/simplified''<td>
<tr><td>Traditional Forms (<code>trad</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/traditional''<td>
<tr><td>Full Widths (<code>fwid</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/full-width''<td>
<tr><td>Proportional Widths (<code>pwid</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/proportional-width''<td>
<tr><td>Ruby Notation Forms (<code>ruby</code>)<td>'font-variant-east-asian!!property': ''font-variant-east-asian/ruby''<td>
</table>
</p>

<div class="example" id="ex-scientific-inferiors">
<p>For example, there is no font-variant value to control
Expand Down Expand Up @@ -6027,15 +6098,15 @@ any previous value for that axis.</p>

<div class="example" id="ex-font-feature-settings-map">
<pre>
font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
font-feature-settings: "liga" off; /* liga=0 no common ligatures */
font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
font-feature-settings: "sinf" 1; /* sinf=1 enable Scientific Inferiors */
font-feature-settings: "sinf" on; /* sinf=1 enable Scientific Inferiors */
font-feature-settings: 'sinf'; /* sinf=1 enable Scientific Inferiors */
font-feature-settings: "sinf" off; /* sinf=0 disable Scientific Inferiors */
font-feature-settings: "sinf", 'twid'; /* sinf=1, twid=1 enable Scientific Inferiors and Third Widths */
font-feature-settings: "sinf" "twid"; /* invalid, need a comma-delimited list */
font-feature-settings: "silly" off; /* invalid, tag too long */
font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
font-feature-settings: dlig; /* invalid, tag must be a string */
font-feature-settings: sinf; /* invalid, tag must be a string */
</pre>
</div>

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

<p class="advisement">Authors should <em>not</em> use
<span title="font-variation-settings!!property">'font-variation-settings!!property'</span> to set any of the variation axes in
the table below. Instead, please use the higher-level replacement properties, because:
<ol>
<li>The higher-level properties cascade individually. You can set one without setting the whole 'font-variation-settings!!property' list
<li>Some higher-level properties can be synthesized for fonts that do not support the font variation.
</ol>
<table id="fvs-replacements" class="data">
<thead>
<tr>
<th>If you want to set this variation axis
<th>then use this <em>instead of</em> 'font-variation-settings!!property'
<th>Notes
<tbody>
<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.
<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.
<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.
<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.
</table>
</p>

The use of font variation settings
does not affect font selection
where a fallback font is to be used,
Expand Down Expand Up @@ -6986,7 +7078,7 @@ User-defined font color palettes: The ''@font-palette-values'' rule</h3>

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