网络字体能为您的网站带来个性，但也会增加网站的重量。
如果字体加载时间过长，用户就会看到空白的屏幕。更糟糕的是，您的网站可能会因为文字意外移动而显得不稳定。
这也会损害 Core Web Vitals 指标–直接影响搜索排名和用户体验的指标。
在这里，每一毫秒都很重要。
那么，如何在不影响性能的前提下保留您所选择的 Web 字体呢？
让我们一步一步来分析。
首先，什么是网络安全字体和网络字体？
什么是网络安全字体？
网络安全字体是在任何地方都能使用的可靠选择。它们是大多数设备已经拥有的字体，这意味着你可以指望它们快速加载。
以下是您可以使用的网络安全字体：
- Arial
- Times New Roman
- Verdana
- Trebuchet MS
- Courier
- Impact
- Georgia
- Comic Sans MS
- 黑体
- 宋体
- 微软雅黑
即使选择有限，熟练的设计师也能创造性地使用这些字体。
但是，Web 安全字体经常被过度使用，给人一种“雷同”的感觉–即使你在设计网站时投入了大量的精力和金钱。
那么，如何让网站看起来更漂亮呢？
使用网络字体。
什么是网络字体？
网络字体可以让您摆脱经常被过度使用的网络安全字体。
网络字体可以从谷歌字体等外部资源下载，也可以直接从服务器下载到用户的设备上（临时），而不是依赖用户设备上的字体。
这样，您就可以使用任何符合您的品牌或设计需求的自定义字体。
我们还为您精选了最好的 Google 字体，以帮助您开始使用。
当用户访问您的网站时，网络字体会被临时下载，并通过 CSS 中的 @font-face 规则应用到文本中。
然后，网络字体就开始像本地字体一样运行–它们会根据屏幕尺寸自动调整，同时保持网站的清晰度。
随着时间的推移，字体也发展出了更有效的存储格式。与图像格式类似，字体也有 TTF、WOFF、WOFF2 和 EOT。
- 嵌入式 OpenType (EOT)：兼容旧版本的 Internet Explorer（IE9 以下）。默认情况下不压缩，但可以应用 GZIP 压缩。
- TrueType (TTF)：支持旧版 Android 浏览器（4.4 以下版本）。默认情况下未经压缩，但可进行 GZIP 压缩。
- 网络开放字体格式 (WOFF)：大多数现代浏览器都支持，包括内置压缩功能。
- 网络开放字体格式 2 (WOFF2)：与支持该格式的浏览器兼容，采用自定义压缩算法，文件大小比其他格式减少约 30%。
现代格式提供的压缩功能可提高性能，并有助于保持网站设计的功能性和视觉独特性。
什么是Core Web Vitals (CWV)指标？
问题是：谷歌希望所有用户都能获得卓越的体验。
哪个网站或应用程序能给谷歌用户带来最佳体验，哪个网站或应用程序就能得到谷歌算法的更多“关爱”。
那么如何衡量这种“体验”呢？
为此，谷歌于 2020 年初推出了Core Web Vitals。
CWV包含三项指标，可以告诉谷歌，您的网站或应用程序在用户访问时的表现如何。
在这些指标上得分越高，您在谷歌上的排名就越靠前。让我们快速了解一下这些指标。
最大内容绘制（LCP）
LCP 衡量页面上最大的可见元素加载所需的时间。
这通常是图片或视频，但也可能是大块文本或嵌入式视频。
加载速度越快，网站在用户和搜索引擎眼中的表现就越好。
良好的 LCP 得分意味着用户不会等待主要内容的出现。
从交互到下一步绘画 (INP)
INP 衡量用户交互（如点击或轻点）与页面视觉响应之间的时间间隔。
与 FID 相比，它能更准确地反映互动性，因为它考虑的是整个用户旅程，而不仅仅是第一次互动。
INP 分数低意味着网站的响应速度快，能提高用户参与度和满意度。
累积布局偏移（CLS）
CLS 衡量页面加载时的稳定性。
当元素意外移动时，会让用户感到沮丧，并使页面感觉不可靠。
CLS 分数越低，说明页面加载越流畅，不会出现影响用户体验的布局偏移。
如何优化网络字体以获得更好的Core Web Vitals
那么，关于网页字体性能的大惊小怪是怎么回事？
为什么我们不能直接添加网页字体就完事了呢？当然可以。
但正如我们之前所说，网页字体不是本地字体。它们是从服务器上获取、下载并应用到网站上的，这就是问题所在。
这需要时间。
如果耗时过长，就会影响您的核心网络生命值和网站转化率。
让我们来看看优化网页字体以提高核心网页生命值的一些方法。
1. 预载字体
你希望在页面开始加载时，字体就已经准备就绪。
因此，当页面为用户准备就绪时，字体也就准备就绪了。
这就是所谓的预加载。
预加载会告诉浏览器：”嘿，这种字体很重要。请立即加载”。
假设您使用的是流行的Google 字体 Roboto 。
您需要在 HTML 代码中添加一个属性来预载字体：rel="preload"
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>
这样，浏览器就会知道要优先下载 Roboto 字体，这样您的文本就能更快地显示出正确的字体样式。
这就缩短了最大内容绘制（LCP）的渲染时间，因此用户可以更快地看到网站的最终版本。
2. 使用字体显示属性控制字体加载行为
然而，由于字体具有优先权，预加载可能会稍微增加初始加载时间。
font-display property 可让你在加载自定义字体时控制文本的行为。
这可以帮助您避免出现可怕的 “Flash of Invisible Text（隐形文本闪烁）”和“Flash of Unstyled Text（无样式文本闪烁）”，前者会让用户看到空白，后者会让页面显示一秒钟的备用字体，然后立即切换到自定义字体。
font-display property 有四种管理文本行为的方法：block, swap, fallback, 和 optional.
让我们来看看你需要的两种方式。
font-display: swap– 对于大多数网站来说，该选项是最安全的选择。它能确保文本立即以备用字体显示，并在准备就绪后切换到自定义字体。
@font-face {
font-family: 'Roboto';
src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
font-display: swap;
}
在这里，后备字体（如 Arial 或其他系统字体）将立即加载，以保持页面的可读性。
下载 Roboto 时，它会替换掉备用字体，而不会在屏幕上留下空白。
font-display: optional– 如果你担心速度问题，那么如果自定义字体的加载速度不够快，浏览器就会跳过该字体。如果你不介意后备字体保留在原处，则可以使用此方法。
@font-face {
font-family: 'Roboto';
src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
font-display: optional;
}
当性能比设计更重要时，这个选项就很有意义，非常适合注重速度的网站。
下面是一个实际应用的例子。你不会注意到这里的切换，因为大多数字体的加载速度都足够快。
不过，如果你的字体服务器出现故障或速度变慢，可选参数就非常有用了。
3. 子集字体
大多数字体都有数百甚至数千个字符。
您可能只需要其中的一小部分。删除这些字符就叫做字体子集。
没错，你可以删除不必要的字符，以减小字体文件的大小。
假设您的网站只需要英文字符。
像 FontTools 这样的工具可以帮助您对字体进行子集，使其只包含实际使用的字符。
这意味着所有在英语中不需要的 Unicode 字符都可以删除，以节省文件大小。
这样，文件大小就会从 80 KB 减小到 30 KB。
文件越小，下载速度越快，LCP 和 CLS 也会得到改善，因为字体加载速度很快，而且不会改变布局。
下面是一个例子，说明如何使用 FontTools 删除除英文字符以外的所有内容：
pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F
现在，你的 Roboto 字体只包含英文文本所需的基本拉丁字符，载入速度大大加快。
如果你更喜欢基于图形用户界面的方法，也可以试试 font-squirrel。一旦上传了字体文件，你就可以获得大量的自定义选项来添加或删除字体。
4. 压缩字体
与 TTF 等旧格式相比，WOFF2 等现代字体格式提供的压缩功能可将字体大小缩小 30%。
使用最压缩版本的字体可以大大减少对页面加载时间的影响。
例如，以下是确保使用 WOFF2 的方法：
@font-face {
font-family: 'Roboto';
src: url('roboto.woff2') format('woff2'),
url('roboto.woff') format('woff');
font-weight: 400;
}
这样，支持 WOFF2 的浏览器就会默认使用 WOFF2，从而缩短加载时间，同时还能显示清晰、高质量的字体。
但是，如果浏览器无法使用 WOFF2，则默认使用 WOFF。
5. Base64 编码
这是另一种常用的优化网页字体的方法。
不过，在使用 Base64 编码字体时需要谨慎。
Base64 编码对小字体或图标最有用。
但如果过度使用，就会使 CSS 变得臃肿，增加页面加载时间，这比只使用字体本身还要糟糕。
如果要对图标字体使用 Base64 编码，首先要将字体文件转换为 Base64 格式。如下所示：
@font-face {
font-family: 'CustomIcons';
src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
font-weight: normal;
font-style: normal;
}
这种方法适用于网站中经常使用的小图标字体。
CSS 文件与嵌入的字体一起加载，从而避免了额外的 HTTP 请求。
不过，大型正文字体应避免使用这种方法，因为它会降低初始页面渲染的速度。
6. 字体的<link>与CSS@import
<link> 和 @import 在加载性能上有很大区别。
<link> 标签以异步方式加载字体，这意味着它不会耽误页面其他部分的渲染，而 @import 则会慢一些。
尽可能使用 <link>。
90%以上的情况下，你都可能需要使用
<link>标签。根据经验，你应该避免使用@import规则，因为它们会将包含资源的加载推迟到获取文件之后。Ilya Grigorik，Shopify 首席执行官的工程师兼技术顾问
它可以独立加载字体，使页面的其他部分无需等待字体文件即可加载。
<link href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">
这是加载 Google 字体或类似外部字体服务的首选方法。
将其置于 HTML 的 <head> 部分，可确保字体尽早开始加载，而不会阻塞其他资源。
对于关键字体，请避免使用 @import。
@import 会等待 CSS 文件完全加载完毕，这会延长加载时间并损害 LCP。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
对字体使用@import只适用于次要或不太重要的字体。在实践中，首屏内容中的任何字体都应避免使用@import。
7. 通过字体匹配和大小调整减少视觉偏移/CLS
视觉偏移（或谷歌所说的累积布局偏移（CLS））会在布局发生意外变化时出现，通常是由于字体交换造成的。
为尽量减少这种影响，请选择与自定义字体风格和尺寸非常相似的后备字体。
CSS size-adjust 属性还可以让你控制后备字体大小，从而减少加载自定义字体时的视觉偏移。
如果您的自定义字体是 Roboto，同时也是一种后备字体，则可将其大小调整为与 Roboto 匹配，从而实现几乎无缝的过渡。
@font-face {
font-family: 'Roboto';
src: url('roboto.woff2') format('woff2');
font-display: swap;
size-adjust: 100%;
}
在此，Roboto 的后备字体（如 Arial）保持一致的大小，从而在 Roboto 完全加载时减少任何明显的移动。
一旦将后备字体的大小和间距与自定义字体保持一致，就能确保当 Roboto 替换为 Arial 字体时，移动幅度最小，从而保持较低的 CLS 值，改善用户体验。
8. 找到合适的地方托管网络字体
自行托管字体并不总是意味着更快的性能。
许多第三方选项也有很好的表现，有时甚至能加快加载速度。
Web Almanac 发现，某些使用第三方字体的网站比使用自托管字体的网站加载速度更快。
归根结底，字体性能与其说取决于托管选择，不如说取决于三个关键因素：
- 内容交付网络（CDN）：通过从全球多个地点提供字体，确保更快地交付。
- HTTP/2：通过并行处理多个请求来提高加载速度，减少延迟。
- 网络缓存策略：有效缓存字体，因此每次访问都无需重新下载。
与其纠结于托管问题，不如集中精力设置这些基本要素，无论字体托管在哪里，都能保证字体顺利加载。
如何简化网络性能优化
如果觉得上述技术过于繁琐，Jetpack 这样的插件可以让一切变得简单。
Jetpack 由 Automattic 开发，是专为 WordPress 网站打造的一体化解决方案。
它结合了安全、性能和营销方面的基本功能，全部由一个平台管理。
即使您不懂技术，Jetpack 也能帮助您提高网站速度、加强安全性并提升用户体验。(无需复杂设置）
小结
Web 字体能为您的网站带来独特、美观的外观。
但是，如果没有正确的调整，它们也会降低速度，让用户感到失望。
虽然我们已经介绍了基本的字体优化技术，但性能微调涉及到无数技术细节。
要想获得最佳效果，可能会感到力不从心。
这正是闪电博专业网站开发服务的用武之地。
我们将确保您的网站美观大方，优化速度和用户体验。
让我们来处理技术问题，而你则专注于建设一个真正与众不同的网站。
评论留言