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

2022-01-21 00:00:00 fonts base64 css webfonts google-webfonts

受Smashing Magazine 的延迟字体加载逻辑启发，我想在我的网站上延迟字体加载.

I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine.

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

Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far:

  1. 在 Google Web Fonts 上选择字体并下载.
  2. 使用 Font Squirrel Webfont Generator 将下载的 TTF 文件转换为嵌入 base64 的 CSS 文件WOFF 字体(专家选项 -> CSS -> Base64 编码).
  3. 异步加载 CSS 文件(此处不重要).
  1. Pick fonts on Google Web Fonts and download them.
  2. Use Font Squirrel Webfont Generator to convert downloaded TTF files to CSS file with base64 embedded WOFF fonts (Expert options -> CSS -> Base64 Encode).
  3. Load CSS file async (not important here).

<小时>

Open Sans Bold 的 CSS 片段:

CSS snippet for Open Sans Bold:

@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:

The problem is, that converted fonts look a lot different. Take a look at Open Sans Bold:

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

Especially notice accents being way off and absolutely horrible letter a. Other font families and variants look very noticeably different as well (size and shape distortions, etc.).

所以问题是:如何正确地将来自 Google Web Fonts(或其他来源)的 TTF 文件编码为 base64 格式，并以与原始文件相同的方式使用它?

推荐答案

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

In the Font Squirrel Expert options, make sure to set the 'TrueType Hinting' option to 'Keep Existing'. Either of the other options will cause the TrueType instructions (hints) to be modified, which will in turn affect the rendering of the font.

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

Alternatively, if you're happy with the rendering of the font directly from GWF, you can just take that file and do the base64 encoding yourself. In OS X or Linux, use the built-in base64 command in Terminal/shell:

$ base64 myfont.ttf >fontbase64.txt

对于 Windows，您需要下载一个以 base64 编码的程序(有几个免费/开源工具可用).复制该文件的内容，然后在您的 CSS 中使用:

For Windows, you'll need to download a program to encode in base64 (there are several free/Open Source tools available). Copy the contents of that file, then use in your CSS as:

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

(Note that you may need to make some adjustments to the various @font-face info to match your particular font data; this is just an example template)

相关文章