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

Question

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

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

< li >在Google Web字体上选择字体并下载。 < li >使用Font Squirrel Webfont Generator将下载的TTF文件转换为带有base64嵌入式WOFF字体的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;
}

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

所以问题是：你如何正确地将来自Google网页字体（或其他来源）的TTF文件编码为base64格式，并以结果与原始文件相同的方式使用它？

Answer 1

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

Answer 2

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

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

$ base64 myfont.ttf

对于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信息进行一些调整，以匹配特定的字体数据；这只是一个示例模板。）