当我们在前端开发中使用自定义字体时，会遇到字体加载慢影响用户体验的情况，今天本篇文章来介绍 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浏览器没有超时行为，不知道后备字体和字体替换。

基本使用

@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

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';
        });
    }
}

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。

CSS属性：font-display

目录