将 Web 字体转换和渲染为 base64 - 保持原始外观

Posted 2023-03-15

【中文标题】将 Web 字体转换和渲染为 base64 - 保持原始外观

【英文标题】：Converting and rendering web fonts to base64 - keep original look

【发布时间】：2015-01-08 04:17:42

【问题描述】：

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

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

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

---

Open Sans Bold 的 CSS sn-p：

@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 Web Fonts（或其他来源）的 TTF 文件编码为 base64 格式，并以与原始文件相同的方式使用它？

【参考方案1】：

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

或者，如果您对直接从 GWF 渲染字体感到满意，您可以直接获取该文件并自己进行 base64 编码。在 OS X 或 Linux 中，使用 Terminal/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 信息进行一些调整以匹配您的特定字体数据；这只是一个示例模板）

【讨论】：

我尝试做同样的事情。我按照您的指示进行操作，但仍然无法正常工作。该字体的渲染效果比 Google 提供的 WOFF 差。我还尝试了不同的其他选择。还有其他方法吗？

答案已更新，解释了如何自己做 base64 并在 CSS 中使用。

我认为示例中存在语法错误。它应该是一个逗号而不是 base64 之后的分号，因此：base64,> 否则真的很有帮助。谢谢。

你说得对，RFC 2397 说它应该是在“base64”指示符之后的逗号。我已经更新了我的答案以反映这一点。

我注意到保持src: 行（包括base64 字符串）为一行很重要。默认情况下，base64 命令可能会插入换行符。这可以使用-w 参数禁用：base64 -w 0 font.ttf > font_base64.txt。 （对于来自 GNU coreutils 的 base64 实用程序）

【参考方案2】：

使用此代码 sn-p 直接在浏览器中对您的字体进行 base64 编码（独立于操作系统，无需安装任何东西）

function base64convert (files) 
  console.clear()
  const reader = new FileReader()
  reader.onload = (e) => 
    console.log(e.target.result)
  
  reader.readAsDataURL(files[0])

<input type="file" onchange="base64convert(this.files)">

然后复制输出并将其粘贴到您的 CSS 中：

@font-face 
    font-family: 'myfont';
    src: url("<<copied base64 string>>");

【讨论】：

哇。这真是令人印象深刻。它有效。 :-)