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

从此字体中删除非拉丁字符会产生woff2一个大小为六分之一的文件。
字体格式各主流设备基本都支持 woff2 字体格式，因此网站中没有必要再引入多种不同格式的字体了。一般地，建议只引入 woff2 就好了，既可以保持代码的简洁性，又可以减少上传到你服务器的文件。
加载更少的字体虽然我们会将字体转换成woff2格式，但文件大小依然有好几百K，有时甚至是几M，字体文件的大小也会影响页面整体的渲染速度。有些时候我们只需要一些极少数的文字用于特殊字体，那我们就没必要将一整个字体文件引入了。
提取字体当我们遇到上面这种情况时，千万不要将一整个字体包引入进去，这将极大地浪费网络带宽，从而影响页面的加载。这里推荐使用font-spider 字蛛来提取文字。

安装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) 将阻止浏览器使用字体文件，直到它验证它在服务器上没有更改。字体很少改变，所以我们应该如下实现一个缓存头，并在字体改变时更新文件名来破坏缓存：