You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Note: Many browsers have a default policy similar to that specified by ''block''.
1662
+
1663
+
<dt><dfn>block</dfn>
1664
+
<dd>
1665
+
Gives the font face a short <a>block period</a>
1666
+
(''3s'' is recommended in most cases)
1667
+
and an infinite <a>swap period</a>.
1668
+
1669
+
Note: In other words, the browser draws "invisible" text at first if it's not loaded,
1670
+
but swaps the font face in as soon as it loads.
1671
+
1672
+
This value must only be used when rendering text in a particular font is required for the page to be usable.
1673
+
It must only be used for small pieces of text.
1674
+
1675
+
<div class="example">
1676
+
For example, badly designed "icon fonts" might associate a "⎙" (print) icon
1677
+
with an unrelated character like "C",
1678
+
so if the text is displayed with a fallback font instead
1679
+
there will be confusing letters scattered around the page
1680
+
rather than the desired icon.
1681
+
In this case, temporary blank spots are better than using a fallback font.
1682
+
1683
+
(However, the fallback font is used <em>eventually</em>,
1684
+
as having confusing letters scattered around the page
1685
+
is better than having links and such never show up at all.)
1686
+
</div>
1687
+
1688
+
<dt><dfn>swap</dfn>
1689
+
<dd>
1690
+
Gives the font face a ''0s''<a>block period</a>
1691
+
and an infinite <a>swap period</a>.
1692
+
1693
+
Note: In other words, the browser draws the text immediately with a fallback if the font face isn't loaded,
1694
+
but swaps the font face in as soon as it loads.
1695
+
1696
+
This value should only be used when rendering text in a particular font is very important for the page,
1697
+
but rendering in any font will still get a correct message across.
1698
+
It should only be used for small pieces of text.
1699
+
1700
+
<div class='example'>
1701
+
For example,
1702
+
if a website has a custom font for rendering their logo,
1703
+
rendering that logo correctly is fairly important for branding purposes,
1704
+
but displaying the logo in any font will at least get the point across without confusion.
1705
+
</div>
1706
+
1707
+
<dt><dfn>fallback</dfn>
1708
+
<dd>
1709
+
Gives the font face an extremely small <a>block period</a>
1710
+
(''100ms'' or less is recommended in most cases)
1711
+
and a short <a>swap period</a>
1712
+
(''3s'' is recommended in most cases).
1713
+
1714
+
Note: In other words, the font face is rendered with a fallback at first if it's not loaded,
1715
+
but it's swapped in as soon as it loads.
1716
+
However, if too much time passes,
1717
+
the fallback will be used for the rest of the page's lifetime instead.
1718
+
1719
+
This value should be used for body text,
1720
+
or any other text where the use of the chosen font is useful and desired,
1721
+
but it's acceptable for the user to see the text in a fallback font.
1722
+
This value is appropriate to use for large pieces of text.
1723
+
1724
+
<div class="example">
1725
+
For example,
1726
+
in large pieces of body text,
1727
+
it's most important just to get the text rendered quickly,
1728
+
so the user can begin to read as quickly as possible.
1729
+
Further, once the user has started reading,
1730
+
they shouldn't be disturbed by the text suddenly "shifting"
1731
+
as a new font is swapped in,
1732
+
as that's distracting and annoying to re-find where one was in the text.
1733
+
</div>
1734
+
1735
+
<dt><dfn>optional</dfn>
1736
+
<dd>
1737
+
Gives the font face an extremely small <a>block period</a>
1738
+
(''100ms'' or less is recommended in most cases)
1739
+
and a ''0s''<a>swap period</a>.
1740
+
1741
+
If the font is not retrieved before the two durations expire,
1742
+
the user agent may choose to abort the font download,
1743
+
or download it with a very low priority.
1744
+
If the user agent believes it would be useful for the user,
1745
+
it may avoid even starting the font download,
1746
+
and proceed immediately to using a fallback font.
1747
+
1748
+
Note: In other words, the font is used if it's already downloaded and available,
1749
+
but otherwise a fallback is used for the rest of the page's lifetime instead.
1750
+
The font might download in the background and be available to future page loads,
1751
+
but if the user-agent detects that the user has very limited bandwidth,
1752
+
it might choose to simply never download and use the font.
1753
+
1754
+
This value should be used for body text,
1755
+
or any other text where the chosen font is purely a decorative "nice-to-have".
1756
+
It should be used anytime it is more important that the web page render quickly on first visit,
1757
+
than it is that the user wait a longer time to see everything perfect immediately.
1758
+
1759
+
<div class='example'>
1760
+
For example, body text is perfectly readable in one of the browser default fonts,
1761
+
though a downloadable font face may be more attractive
1762
+
and mesh with the site's aesthetics better.
1763
+
First time visitors to a site generally care far more about the site being quickly usable
1764
+
than they do about the finer points of its display,
1765
+
and ''optional'' provides a good behavior for them.
1766
+
If they return later,
1767
+
the desired font faces might have finished downloading,
1768
+
giving them the "intended" experience without slowing down
1769
+
either their first or subsequent visits.
1770
+
1771
+
Users on very slow connections might not ever receive the "intended" experience,
1772
+
but ''optional'' ensures they can actually <em>use</em> the site,
1773
+
rather than quitting and going elsewhere because the site takes too long to load.
1774
+
</div>
1775
+
</dl>
1776
+
1777
+
<div class='issue'>
1778
+
These names aren't great.
1779
+
It would probably be better to use "intent" names
1780
+
that immediately capture the intended usage of each.
1781
+
Some suggestions:
1782
+
1783
+
* required / important / preferable / optional
1784
+
</div>
1785
+
1786
+
<h4 id="font-display-font-feature-values">Controlling Font Display Per Font-Family via ''@font-feature-values''</h4>
1787
+
The '@font-feature-values/font-display' descriptor for ''@font-feature-values'' determines how a font family is displayed, by setting the "default" font-display value for @font-face rules targeting the same font family.
1788
+
When font-display is omitted in an @font-face rule, the user agent uses the font-display value set via the @font-feature-values/font-display for the relevant font-family if one is set, and otherwise defaults to "font-display: auto".
1789
+
1790
+
This mechanism can be used to set a default display policy for an entire font-family, and enables developers to set a display policy for @font-face rules that are not directly under their control.
1791
+
For example, when a font is served by a third-party font foundry, the developer does not control the @font-face rules but is still able to set a default font-display policy for the provided font-family.
1792
+
The ability to set a default policy for an entire font-family is also useful to avoid the ransom note effect (i.e. mismatched font faces) because the display policy is then applied to the entire font family.
The algorithm below describes how fonts are associated with
@@ -2409,3 +2697,5 @@ at least as dark as its predecessor. Only values greater than 0 and less than 10
2409
2697
Peter Constable for assorted language fixes.
2410
2698
2411
2699
Optical sizing <a href="#optical-size-example">image</a> prepared by Nick Sherman.
2700
+
2701
+
Special thanks to Tab Atkins, Jr. for providing the text for the section on <a href="#font-rendering-controls">Font Rendering Controls</a> as well as the section on the 'font-display' descriptor. Special thanks to Ilya Grigorik and David Kuettel for their help in developing these sections.
0 commit comments