牛散村:html5中web字体加载方案优化

对于不少的开发者来说​，他们对网页字体使用会相对接触比较少一些，使用最多也无非是 font-family ，那么今天呢！我们就来分享有关于“html5中web字体加载方案优化小结！！干货分享！！！”这方面的内容！希望大家可以有所收获！

代码：

@font-face {
  font-family: 'family-name';
  src: url('${url}');
}
.main {
  font-family: 'family-name';
}

然而实际开发过程中，往往会遇到更多的问题，比如切换字体加一个loding效果。

这里主要总结一下web字体加载存在的问题，以及最佳实践。

FOIT

一般情况下，在字体文件加载完成之前，浏览器会使用备用字体来显示文字，这被称为FOIT（Flash of Unstyled Text），然而貌似除了IE，其他浏览器都会等待3秒才展示系统字体，这样就会出现一个长达3秒的文字闪白现象，这种用户体验就很差了。

font-display

为了解决这种，CSS Fonts Module Level 3 中添加了一个 font-display 属性，这个属性可以让浏览器立即使用备用字体，在web字体加载完成之后立即替换，并重新渲染。

其相关介绍如下：

• auto：使用浏览器默认的行为；
• blo