将网络字体转换和呈现为base64-保持原始外观 [英] Converting and rendering web fonts to base64 - keep original look

问题描述

我想根据 Smashing Magazine的延迟字体加载逻辑来推迟网站上的字体加载

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

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

1. 在 Google网络字体上选择字体并下载.
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字体(或其他来源)中的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)

这篇关于将网络字体转换和呈现为base64-保持原始外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！