共计 872 个字符，预计需要花费 3 分钟才能阅读完成。
浏览器是如何加载字体的
FOIT
大多数浏览器在自定义字体还未下载之前会先暗藏文本。这就是大家所说的不可见文本（Flash of Invisible Text）
FOUT
其实刚开始时浏览器应用的是 FOUT, 即无款式文本（Flash of Unstyled Text）。字体未下载之前显示零碎字体，字体下载实现之后显示 web 字体，比起零碎字体，Web 字体很可能会在屏幕上占据不一样的空间。第二次渲染时，页面布局变了，文字忽然跳动了。如果这是在第一次渲染之后很快产生，用户可能不会留神到。然而如果字体下载过程中有网络提早（或者字体文件太大了），可能长达几秒之后才会再次渲染页面。这种状况产生时，有的用户可能会感到腻烦。他们可能曾经开始浏览网页内容了，这时页面忽然变动，会让他们注意力扩散。
因为开发者们不喜爱这样，所以大部分浏览器供应商批改了浏览器的行为
font-display
font-display 用来管制浏览器如何加载字体
| 值 | 形容 |
|---|---|
| auto | 默认值。典型的浏览器字体加载的行为会产生，也就是应用自定义字体的文本会先被暗藏，直到字体加载完结才会显示。(FOIT) |
| swap | 字体文件未加载前显示零碎字体，加载完后切换为 web 字体 (FOUT) |
| fallback | 能够说是 auto 和 swap 的一种折中形式。须要应用自定义字体渲染的文本会在较短的工夫（100ms according to Google）不可见，如果自定义字体还没有加载完结，那么就先加载无款式的文本。一旦自定义字体加载完结，那么文本就会被正确赋予款式。 |
| optional | 给了大概 100 毫秒的字体期待期，给自定义字体一个奋斗的机会，看能不能在页面视图一开始就显示进去。但过了这个工夫，零碎字体呈现，并且不会再替换。可能那个自定义字体最终下载好了，那也要等下一页把它从缓存里取出并应用。 |
对于高网速，fallback 体现最好，会呈现短暂的 FOIT，但如果 Web 字体加载超过了 100ms 就会产生 FOUT。对于低网速，swap 更好一些，能够立即渲染回退字体。如果 Web 字体对于整体设计来讲并非必不可少的时候，就能够应用 optional
正文完