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

Question

我想推迟字体加载在我的网站灵感来自用于粉碎杂志的延迟字体加载逻辑。

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

1. 选择Google字体上的字体并下载它们。
2. 使用字体松鼠Webfont字体生成器将下载的TTF文件转换为带有base64嵌入式WOFF字体的CSS文件(专家选项-> CSS -> Base64编码)。
3. 加载CSS文件异步(这里不重要)。

用于的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;
}

的问题是，转换后的字体看起来与大不相同。看看：

​

特别是注意口音远离和绝对可怕的字母a。其他字体系列和变体看起来也很明显不同(大小和形状扭曲等)。

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

Answer 1

在字体松鼠专家选项中，确保将“TrueType暗示”选项设置为“保持现有”。任何其他选项都会导致修改TrueType指令(提示)，这反过来会影响字体的呈现。

Alternatively，--如果您对直接从GWF呈现字体感到满意，您可以直接获取该文件并自己进行base64编码。在OS或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;
}

(请注意，您可能需要对各种@字体面信息进行一些调整，以匹配特定的字体数据；这只是一个示例模板)

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>>");
}

Answer 3

获取Google字体的base64代码的一个更简单的方法是使用以下工具：https://amio.github.io/embedded-google-fonts/

将URL输入到您的字体中，您将立即获得base64代码:)