html任意使用字体Web 机能优化应用 CSS fontdisplay 掌握字体加载和调换

什么是 Web Fonts

在先容 font-display 之前，先理解一下什么是 Web Fonts。
在以前利用 CSS 指定字体时只能利用用户电脑本地上现有的字体，而由于每个用户电脑上的字体可能都不一样，以是能用的基本上便是操作系统内置的一些字体，例如微软雅黑，宋体，苹果苹方，这些也叫做安全字体（Web Safe Fonts）。
为了使字体显斧正常，我们一样平常会通过 font-family 属性同时指定多个字体，如果第一个字体没有在操作系统中找到，就会利用下一个后备字体（ Fallback Font ），以此类推：

{font-family: \"大众PingFang SC\公众, \公众Microsoft Yahei\"大众, sans-serif;}

后来，CSS 开始支持 @font-face 这个指令，可以加载自定义的字体文件，这个时候可以把字体随网站一起发布，用户在浏览网站的时候，会下载 @font-face 中指定的字体。
例如下边的代码加载了 fonts 目录下的 Raleway 字体：

html任意使用字体Web 机能优化应用 CSS fontdisplay 掌握字体加载和调换 CSS

@font-face {font-family: 'Raleway';font-style: normal;font-weight: 500;src: url(/fonts/raleway.woff2) format('woff2');}

src 属性用于指定字体的位置，个中 url() 函数也接管网络地址，来加载第三方供应的字体文件，这样也催生了像 Google Fonts 这样的云字体做事。
不过，基本上只有英笔墨体才适宜 Web Fonts，由于它只有 26 个英笔墨母外加数字，体积小，适宜在网络上传输，而中文光常用的就有 3000 个字符，以是一样平常只利用操作系统自带的，不过现在也有字体做事会根据网站上所利用的笔墨去动态的天生字体文件。

浏览器加载 Web Fonts 的期间

浏览器加载 Web Fonts 时按顺序会有三个期间：

壅塞期（Block Period）。
在此期间如果字体没有加载完成，那么浏览器会利用 font-family 指定的字体列表中的后备字体（Fallback）进行渲染，但是显示为空缺，也便是对付用户是不可见的。
在此期间字体加载完成之后才能正常显示该字体。

交流期（Swap Period）。
跟壅塞期类似，但是在这个期间内，它会在字体加载时，先用后备字体渲染文本并显示出来（而不是显示空缺），在此期间字体加载完成之后才能正常的显示该字体。

失落败期（Failure Period）。
如果字体加载失落败，则利用后备字体显示文本。

至于每个期间有多长，是根据 font-display 属性的值来确定的。

font-display 先容

font-display 确切的说不是 CSS 属性，而是专用于 @font-face 指令的描述符，它可以取如下几个值：

auto 。
这个是 font-display 的默认值，字体的加载过程由浏览器自行决定，不过基本上和取值为 block 时的处理办法同等。

block 。
在字体加载前，会利用备用字体渲染，但是显示为空缺，使得它一贯处于壅塞期，当字体加载完成之后，进入交流期，用下载下来的字体进行文本渲染。
不过有些浏览器并不会无限的处于壅塞期，会有超时限定，一样平常在 3 秒后，如果壅塞期仍旧没有加载完字体，那么直接就进入交流期，显示后备字体（而非空缺），等字体下载完成之后直接更换。

swap 。
基本上没有壅塞期，直接进入交流期，利用后备字体渲染文本，等用到的字体加载完成之后更换掉后备字体。

fallback 。
壅塞期很短（大约100毫秒），也便是说会有大约 100 毫秒的显示空缺的后备字体，然后交流期也有时限（大约 3 秒），在这段韶光内如果字体加载成功了就会更换成该字体，如果没有加载成功那么后续会一贯利用后备字体渲染文本。

optional 。
与 fallback 的壅塞期同等，但是没有交流期，如果在壅塞期的 100 毫秒内字体加载完成，那么会利用该字体，否则直策应用后备字体。
这个便是说指定的网络字体是可有可无的，如果加载很快那么可以显示，加载轻微慢一点就不会显示了，适宜网络情形不好的时候，例如移动网络。

那么在理解 font-display 之后，那么我们该当不丢脸出来，对付大部分情形该当把它的值设置为 swap ，这样在加载网络字体期间，利用后备字体进行渲染，加载完成之后在更换为指定的网络字体。

运用

现在利用谷歌的 Web Fonts 字体做事已经不须要我们用手动去写 @font-face 指令了，而是通过调用它的接口，直接返回一段 @font-face 指令 CSS 代码，同时它也支持 display=swap 参数，来让返回的 CSS 代码中，设置 font-display 为 swap ，这个可以从我的网站上看到：

/ https://fonts.font.im/css?family=Raleway:500,700&display=swap /@font-face {font-family: 'Raleway';font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.font.im/s/raleway/v19/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}/ ... /

浏览器支持

从 caniuse.com[1] 网站上可以查到，这个属性在各个浏览器中的支持程度为（最低版本）：

IEEdegeFireFoxChromeSafariIOS SafariAndroid BrowserChrome for AndroidFireFox for AndroidNo79586011.111.3818886