当前位置: 首页 > Web前端 > CSS

font-display的使用

时间:2023-03-31 01:04:42 CSS

浏览器如何加载字体FOIT大多数浏览器在下载自定义字体之前隐藏文本。这就是所谓的隐形文字(FlashofInvisibleText)FOUT。其实一开始浏览器使用的是FOUT,也就是FlashofUnstyledText(FlashofUnstyledText)。下载字体前显示系统字体,下载字体后显示网页字体。与系统字体相比,网络字体在屏幕上可能占据不同的空间。第二次渲染时,页面布局发生变化,文字突然跳动。如果这种情况在第一次渲染后不久发生,用户可能不会注意到。但是,如果字体下载过程中出现网络延迟(或字体文件太大),可能需要几秒钟的时间才能再次呈现页面。发生这种情况时,一些用户可能会感到恼火。他们可能已经开始阅读网页内容,突然页面发生变化,分散了他们的注意力。因为开发者不喜欢这样,所以大多数浏览器供应商修改了浏览器的行为font-displayfont-display来控制浏览器如何加载描述autodefault的字体值。会出现典型的浏览器字体加载行为,即使用自定义字体的文本在加载字体之前是隐藏的。(FOIT)加载交换字体文件前显示系统字体,加载后切换为网页字体。(FOUT)fallback可以说是auto和swap之间的折衷。需要使用自定义字体呈现的文本将在短时间内不可见(根据Google的说法为100毫秒)。如果自定义字体没有完成加载,那么首先加载无样式的文本。加载自定义字体后,文本的样式就会正确。Optional给出了大约100毫秒的字体等待时间,让自定义字体有机会查看它是否可以在页面视图开始时显示。但过了这个时间,系统字体出现,就不会再被替换了。也许那个自定义字体终于下载好了,还得等下一个页面从缓存中取出来使用。对于高网速,fallback表现最好,会出现短暂的FOIT,但如果网页字体加载超过100ms,就会产生FOUT。对于低网速,交换更好,立即呈现后备字体。如果网络字体对整体设计不是必不可少的,您可以使用可选的