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

Question

我想在我的网站上推迟字体加载,灵感来自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 Web Fonts(或其他来源)的TTF文件正确编码为base64格式,并以与原始文件相同的方式使用它？

Answer 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信息进行一些调整以匹配您的特定字体数据;这只是一个示例模板)

Answer 2

使用此代码片段直接在浏览器中对您的字体进行 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>>");
}