不久前我们介绍了《Google Analytics跟踪网站页面速度》，其中我们提到了对网页字体的优化可以增加网页加载性能。那么本篇我们将展开讨论如何优化网页字体来获得最佳的表现。由于中文字体的文件少则几兆多则十几兆，对于Web-font来说可操作性不强，我们将先说说英文字体。文章的后面部分再回到中文字体的解决方案。
TL;DR为了避免太枯燥的阅读，如果你不是前端工程师或者是前端技术爱好者，那么仅仅需要把下面五点建议发给您的小伙伴。
- 在服务器开启HTTP/2，并对静态资源设置E-TAG和Cache-Control。避免使用Google Fonts，将字体文件放在国内可以访问的CDN或者本地。使用<link rel=preload>来提前加载字体文件。在@font-face中，使用font-display: swap避免字体阻止期中的空白文本。在@font-face中，使用unicode-range获取所需的中文字体片段。
网页加载的过程大致是一个画画的过程。当开始构思时，画家会构思一个主题（对网页的HTTP请求），然后会对这个主题（HTML）所需要的元素（DOM 元素）进行填充和布局（DOM树）。对每个元素，画家要决定怎么画（获得CSS，并把CSSOM树与DOM树合并），上什么颜色（假设是CSS中的字体）。所有这些都齐了以后，画家就可以把画画出来了。
那么这里又有一个微观的过程就是上色的时间线（字体显示时间线）：