在编写网站的时候，或多或少都会用到一些网络上的字体，CSS3中虽然加入了对WebFonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在WebFonts加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变CSS中的font-display属性，就可以避免这个问题。
什么是WebFonts
在介绍font-display之前，先了解一下什么是WebFonts。在以前使用CSS指定字体时只能使用用户电脑本地上现有的字体，而由于每个用户电脑上的字体可能都不一样，所以能用的基本上就是操作系统内置的一些字体，例如微软雅黑，宋体，苹果苹方，这些也叫做安全字体（WebSafeFonts）。为了使字体显示正常，我们一般会通过font-family属性同时指定多个字体，如果第一个字体没有在操作系统中找到，就会使用下一个后备字体（FallbackFont），以此类推：
*{font-family:"PingFangSC","MicrosoftYahei",sans-serif;}后来，CSS开始支持@font-face这个指令，可以加载自定义的字体文件，这个时候可以把字体随网站一起发布，用户在浏览网站的时候，会下载@font-face中指定的字体。例如下边的代码加载了fonts目录下的Raleway字体：
@font-face{font-family:'Raleway';font-style:normal;font-weight:500;src:url(/fonts/raleway.woff2)format('woff2');}src属性用于指定字体的位置，其中url函数也接受网络地址，来加载第三方提供的字体文件，这样也催生了像GoogleFonts这样的云字体服务。不过，基本上只有英文字体才适合WebFonts，因为它只有26个英文字母外加数字，体积小，适合在网络上传输，而中文光常用的就有3000个字符，所以一般只使用操作系统自带的，不过现在也有字体服务会根据网站上所使用的文字去动态的生成字体文件。
浏览器加载WebFonts的时期
浏览器加载WebFonts时按顺序会有三个时期：
阻塞期（BlockPeriod）。在此期间如果字体没有加载完成，那么浏览器会使用font-family指定的字体列表中的后备字体（Fallback）进行渲染，但是显示为空白，也就是对于用户是不可见的。在此期间字体加载完成之后才能正常显示该字体。
交换期（SwapPeriod）。跟阻塞期类似，但是在这个时期内，它会在字体加载时，先用后备字体渲染文本并显示出来（而不是显示空白），在此期间字体加载完成之后才能正常的显示该字体。
失败期（FailurePeriod）。如果字体加载失败，则使用后备字体显示文本。
至于每个时期有多长，是根据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，这样在加载网络字体期间，使用后备字体进行渲染，加载完成之后在替换为指定的网络字体。
应用
现在使用谷歌的WebFonts字体服务已经不需要我们用手动去写@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]网站上可以查到，这个属性在各个浏览器中的支持程度为（最低版本）：
IEEdegeFireFoxChromeSafariIOSSafariAndroidBrowserChromeforAndroid
FireFoxforAndroid！