css - 将网络字体转换和呈现为 base64 - 保持原始外观

Question

受 deferred font loading logic for Smashing Magazine 启发，我想推迟在我的网站上加载字体.

其中的主要部分是将字体转换为 base64 并准备您的 CSS 文件。到目前为止我的步骤:

1. 在 Google Web Fonts 上选择字体并下载它们。
2. 使用Font Squirrel Webfont Generator将下载的 TTF 文件转换为带有 base64 嵌入式 WOFF 字体的 CSS 文件(专家选项 -> CSS -> Base64 编码)。
3. 异步加载 CSS 文件(此处不重要)。

---

Open Sans Bold 的 CSS 片段:

@font-face {
  font-family: 'Open Sans';
  src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff');
  font-weight: 700;
  font-style: normal;
}

问题是，转换后的字体看起来很不一样。看看 Open Sans Bold:

特别要注意重音和绝对可怕的字母 a。其他字体系列和变体看起来也有非常明显的不同(大小和形状扭曲等)。

---

所以问题是:如何正确地将来自 Google 网络字体(或其他来源)的 TTF 文件编码为 base64 格式，并以与原始文件相同的方式使用它？

Answer 1

在 Font Squirrel Expert 选项中，确保将“TrueType Hinting”选项设置为“Keep Existing”。其他任何一个选项都会导致 TrueType 指令(提示)被修改，进而影响字体的呈现。

或者，如果您对直接从 GWF 呈现的字体感到满意，您可以直接获取该文件并自己进行 base64 编码。在 OS X 或 Linux 中，在终端/shell 中使用内置的 base64 命令:

$ base64 myfont.ttf > fontbase64.txt

对于 Windows，您需要下载一个程序以使用 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 信息进行一些调整以匹配您的特定字体数据；这只是一个示例模板)