font-display的用法

浏览器是如何加载字体的

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