目录

  1. 基本使用
  2. 为什么用 font-display
  3. font-display 可取值
  4. 浏览器支持
  5. 不支持 font-display 使用 Font Loading API

当我们在前端开发中使用自定义字体时,会遇到字体加载慢影响用户体验的情况,今天本篇文章来介绍 font-display 属性,该属性定义了浏览器加载和显示自定义字体文件的方式。开始介绍 font-display 属性前,我们来看看浏览器渲染字体有哪些差异:

Browser Timeout Fallback Swap
Chrome 35+ 3 seconds yes yes
Opera 3 seconds yes yes
Firefox 3 seconds yes yes
IE 0 seconds yes yes
Safari No timeout N/A N/A

Chrome、Opera、Firefox 浏览器超时时间为 3 秒,超时后将使用后备字体渲染。如果字体下载成功,将替换后备字体,重新渲染文本。在 IE 浏览器会立即渲染文本,如果字体未下载完成,使用后备字体立即渲染,如果字体下载成功,使用后备字体重新渲染。Safari浏览器没有超时行为,不知道后备字体和字体替换。

基本使用

1
2
3
4
5
6
@font-face {
font-family: 'YourWebFont',
src: url('https://fonts.gstatic.com/s/baloobhai/v1/xxxx.woff2') format('woff2')
url('https://fonts.gstatic.com/s/baloobhai/v1/xxxx.woff') format('woff');
font-display: swap;
}

为什么用 font-display

  • 决定是否使用后备字体显示字体或者字体下载过程中将其隐藏
  • 控制字体加载后你想要做什么,即继续显示后备字体或者用自定义字体替换。当然,你也可以在每个元素上进行设置
  • 可以为每一个字体指定下载超时值,甚至可以应用到某个指定元素
  • 有效的提升用户体验,以免文字加载太慢影响用户使用和操作。

font-display 可取值

  • auto: 默认值,指定浏览器使用默认方式加载字体,现在大多数浏览器使用默认策略和 block 相似。
  • block: 指定浏览器要隐藏的文本,直到字体完全下载完成。 更准确地说,浏览器用无形占位符绘制文本,然后在字体加载完后立即与自定义字体交换。 这也被称为 “Flash of Invisible Text” 或者 “FOIT”。
  • swap: 指定浏览器使用后备字体渲染文本,直到字体文件下载完成。这也被称为 “flash of unstyled text” 或者 “FOUT”
  • fallback: 该状态是 auto 和 swap 的一个中间状态,浏览器隐藏文本大约 100ms, 如果字体没有下载完成,则使用后备文本字体渲染,知道自定义字体下载完成。
  • optinal: 与 fallback 类似,如果字体能够为页面效果增色不少,但并非特别重要时,使用 optional 正好。使用 optional 时,将由浏览器来决定是否开始下载字体。可以不下载,也可以给予字体较低的优先级,一切取决于浏览器是否认为对用户最有利。当用户处于弱网络下,这是非常有用的,下载字体可能并不是对资源最好的利用。

浏览器支持

Chrome 60+, Opera 47+ 已经支持 font-display 属性

不支持 font-display 使用 Font Loading API

W3C Font Loading API Draft

1
2
3
4
5
6
7
8
9
10
11
var html = document.documentElement;
if("fontDisplay" in document.body.style === false) {
if('fonts' in document) {
document.fonts.load('1em Open Sans Regular');
document.fonts.ready.then(function(fontFaceSet) {
html.className += ' fonts-loaded';
}).catch(function() {
html.className += ' fonts-failed';
});
}
}