将 Web 字体转换和渲染为 base64 - 保持原始外观
我想推迟在我的网站上加载受 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 片段：
@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;
}
https://i.stack.imgur.com/SEmsd.gif
尤其要注意重音与绝对可怕的字母 a 相去甚远。其他字体系列和变体看起来也非常明显不同（大小和形状扭曲等）。
所以问题是：如何正确地将 TTF 文件从 Google Web Fonts（或其他来源）编码为 base64 格式，并以与原始文件相同的方式使用它？
在 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 信息进行一些调整以匹配您的特定字体数据；这只是一个示例模板）
使用此代码片段直接在浏览器中对您的字体进行 base64 编码（独立于操作系统，无需安装任何东西）
函数 base64convert (files) { console.clear() const reader = new FileReader() reader.onload = (e) => { console.log(e.target.result) } reader.readAsDataURL(files[0]) } <输入类型="文件" onchange="base64convert(this.files)">
然后复制输出并将其粘贴到您的 CSS 中：
@font-face {
font-family: 'myfont';
src: url("<<copied base64 string>>");
}
src:行 - 包括 base64 字符串 - 一行很重要。默认情况下，base64 命令可能会插入换行符。可以使用-w参数禁用它：base64 -w 0 font.ttf > font_base64.txt。 （对于来自 GNU coreutils 的 base64 实用程序）