Base64 转换后如何保留原始字体外观以进行 Webfont 加载？

转换为 Base64 时保留原始字体外观

推迟字体加载可以增强网站性能。关键一步是将字体转换为 base64 并将其合并到您的 CSS 文件中。但是，将字体转换为 Base64 有时会改变其外观。

要在 Base64 转换后保持字体的原始外观，请确保执行以下步骤：

1. 优化字体 Squirrel 设置:
   使用 Font Squirrel Webfont Generator 时，在“TrueType”下选择“Keep Existing”专家设置中的“提示”选项。
2. 使用原始 GWF 文件：
   如果您对直接从 Google Web Fonts (GWF) 渲染的字体感到满意，请下载原始文件并自己进行base64编码。在 OS X 或 Linux 上，使用 base64 命令：

$ base64 -i myfont.ttf -o fontbase64.txt

对于 Windows，请使用 base64 编码工具。将 base64 字符串复制到 CSS 中：

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

调整 @font-face 信息以匹配您的字体数据。通过遵循这些方法，您可以保留字体的原始外观，同时实现 Base64 编码以延迟字体加载。

以上是Base64 转换后如何保留原始字体外观以进行 Webfont 加载？的详细内容。更多信息请关注PHP中文网其他相关文章！