如何避免由 Web 字体引起的布局偏移( 二 ) _生活百科

安装font-spider

npm install font-spider -g

提取

我们还是以上面那段诗句为例，那里我们用的是汉仪旗黑.woff2字体文件。这里还是经过缩小文字库之后的大概是32K

文章插图
我们再在项目目录下执行以下命令
font-spider index.html这时会生成一个.font-spider目录，并将提取后的字体文件放在该目录下。现在的字体文件大概就只有10K，比之前的体积小了好几倍。

文章插图
使用系统字体Web 字体很受欢迎，因为它们允许设计人员在浏览器中保持一致的外观和感觉。如果不需要，系统字体将是呈现文本的最快方法。如果当前的Web字体接近系统字体，您可以使用Monica的Font Style Matcher来调整字体设置，直到获得近乎完美的匹配。
使用系统字体意味着文本将尽可能早地呈现。我们现在还拥有使字体与操作系统匹配的方法，这可能比以前的备用选项（如 Arial 和 Helvetica）更具吸引力。为此，我们需要按特定顺序列出所有操作系统的系统字体：
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;}快速交付字体文件很明显，我们为了确保字体快速且正确地应用在我们网页上，我们必须让浏览器尽快下载我们的字体文件，在我们自己的CDN上托管字体将获得最佳性能。
使用CDN托管一般来说，我们应该提供我们服务器中的字体以避免连接到第三方服务器的成本，这对于高延迟连接尤其重要。使用第三方服务意味着您的字体将被延迟。最好的情况是您直接从另一个主机名（例如fonts.gstatic.com）请求字体文件，这会产生连接成本——DNS 查找、TCP 连接和 TLS 协商。最坏的情况是多跳，例如从fonts.googleapis.com加载引用fonts.gstatic.com上的文件的 CSS 文件，会导致两次连接损失。所以我们一般会将一些字体文件等静态资源托管在我们自己的CDN服务器上，以此来加快资源的下载速度。
缓存字体字体可以缓存在两个地方：客户端和CDN 。客户端上的缓存对于会话中的导航很重要，并且应该以避免重新验证请求的方式完成。重新验证请求 (if-not-modified和if-modified-since) 将阻止浏览器使用字体文件，直到它验证它在服务器上没有更改。字体很少改变，所以我们应该如下实现一个缓存头，并在字体改变时更新文件名来破坏缓存：
cache-control: max-age=31536000,immutable这告诉浏览器他们可以保留字体长达一年并且不需要重新验证（ Firefox 和 Safariimmutable 支持，Chrome 应该自动避免重新验证请求）。避免将 ETag 添加到这些响应中，因为它们可能会强制重新验证。
还要检查您的 Content Delivery Network 配置是否可以将字体文件存储在缓存中，较旧的配置可能不包含.woff2扩展名，从而导致原始命中并减慢响应速度。
使用预加载一般来讲浏览器不会随便地去下载字体文件，它们会等到渲染树构建完成后才能知道需要哪些字体。这意味着仅在浏览器下载并解析 HTML 和 CSS 时，即在呈现文本之前，才请求 Web 字体。但需要注意的是，内联 CSS 不需要网络请求，这意味着我们的字体可以在页面加载的早期获取。

文章插图
渲染树的构建过程会阻塞Web字体的请求。
但是如果我们确定页面文本的渲染肯定会用到一些网络字体时，我们可以使用preload让浏览器提前下载字体文件。
<link rel="preload" href=https://www.huyubaike.com/biancheng/"./public/fonts/汉仪旗黑.woff2" crossorigin="anonymous" type="font/woff2">当浏览器解析这行 HTML 时，它会立即发送一个对字体文件的高优先级请求。
但是需要注意的是，预加载的请求会占用其它请求的带宽，所以我们在使用过程需要考虑清楚是否值得这么做。
将字体转为Base64还有一种常用的方法是将字体作为 Base64 字符串嵌入到 CSS 中，从而无需额外的字体请求并确保在呈现文本时字体可用。