优化性能的Web字体：最新的状态

>本文是Siteground合作伙伴关系的贡献。 感谢您支持我们的赞助商。 67％的网站现在使用自定义的Web字体。 但是，这种广泛的采用提出了绩效和用户体验挑战。 本文探讨了Web字体实施中的常见陷阱，并提供解决方案，包括既定的解决方法和未来的标准。

密钥点：

在67％的网站上使用的自定义Web字体，由于其大小和加载时间，可能会对性能和用户体验产生负面影响，可能会导致无形文本（FOIT）。 优化自定义字体涉及使用浏览器兼容格式（优先级WOFF2），仅加载必要的样式和限制字符集的字体最小化字体。

>对抗FOIT，考虑使用系统字体，使用Web字体加载程序进行异步加载或利用CSS字体加载API进行颗粒状控制。

>
• > CSS
属性提供高级字体加载管理，尽管浏览器支持仍然不完整。
• >虽然未风格的文本（fout）可能会持续存在，但可以通过将后备字体指标（x-height and Width）与自定义字体对齐。
自定义Web字体的魅力：
• >网站访问者优先考虑内容。 因此，出色的排版对于可读性，可读性和品牌标识至关重要。 自定义Web字体（未在用户设备上预安装的字体）登录出色的印刷设计。 尽管CSSfont-display规则已启用了广泛采用，但字体文件的固有大小会影响站点性能。 有效的字体加载至关重要。
>
• 理解隐形文本的闪光

>使用自定义字体的典型方法 - 通过CSS

定义它们并依赖默认浏览器行为 - 是次优的。 浏览器通常会延迟字体加载，直到CSS解析完成。 此外，正如Zach Leatherman的亮点一样，字体下载需要特定条件：> 使用指定的

的HTML元素 @font-face在Webkit和blink浏览器中，该元素不得为空。

对于支持Unicode范围描述符的浏览器，内容必须与指定的范围匹配。

此延迟下载通常会导致FOIT：文本隐形性，直到字体负载为止。 FOIT的浏览器处理各不相同：

眨眼和Firefox使用三秒钟的超时；如果字体未加载，则会显示一个后备字体，可能导致Fout（未风格的文本闪光）。
> Safari，Android的默认浏览器和BlackBerry在字体加载之前不显示文本，使用户留有空白。
• IE/Edge直接显示后备字体，一种更易于用户友好的方法。
>
虽然福特比FOIT的破坏性不大，但理想情况下，应避免两者。 但是，许多专家都认为福特比FOIT更可取。

>优化自定义字体文件：

> 几种策略最小化字体文件大小：

1. >最小化字体：

   使用少量精心选择的字体。>

>浏览器兼容的格式：优先级WOFF2，倒退到Woff。 示例：

2. <code class="language-css">@font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), local('OpenSans'),
          url('fonts/open-sans.woff2') format('woff2'),
          url('fonts/open-sans.woff') format('woff');
   }</code>

   >仅加载必要的样式：
避免加载未使用的字体变化（斜体，粗体等）。
3. >

   >

   >子集字符集：
仅包含页面上使用的字符。 （有关详细信息

4. 地址foit：

几种方法减轻foit：

避免自定义字体（系统字体后备）：一种简单的，尽管在美学上较少令人愉悦，但解决方案是仅依靠系统字体。 示例：

1. Web字体加载程序：此JavaScript库异步加载字体，显示后备直到自定义字体可用。

   <code class="language-css">body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }</code>

>
2. CSS字体加载API：该标准API可对字体加载进行精细元素的控制，从而可以使用系统字体，直到准备好自定义字体为止。 （有关教程，请参见Manuel Matuzovic的“从CSS字体加载开始”）。
   未来：CSS
：
3. >

   > CSS 属性提供了对字体加载和后备行为的颗粒状控制。 值包括，

   ，
，

和

。 虽然浏览器支持仍然有限，但它代表了Web字体加载的未来。> font-display 缓解福特：

font-display当上述方法解决foit时，可能仍会发生fout。 最大程度地减少其影响涉及使用Monica Dinculescu的字体样式匹配器等工具将后备字体的X-Height和Width与自定义字体的尺寸匹配。> autoblock结论： swap fallback有效的Web字体管理需要优化文件大小并控制字体加载行为。 这里讨论的方法以及提供的资源提供了有效的解决方案，以增强网站性能和用户体验。 optional

常见问题（常见问题解答）：

>（原始输入的常见问题解答部分已经写得很好，不需要对此重写进行重大修改。）

）原始FAQ部分保留了。

以上是优化性能的Web字体：最新的状态的详细内容。更多信息请关注PHP中文网其他相关文章！