CSS 将 Web 字体转换和呈现为 base64 - 保持原始外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26867893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting and rendering web fonts to base64 - keep original look
提问by smajl
I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine.
我想在我的网站上延迟字体加载，灵感来自Smashing Magazine 的延迟字体加载逻辑。
Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far:
主要部分是将字体转换为 base64 并准备您的 CSS 文件。到目前为止我的步骤：
- Pick fonts on Google Web Fontsand download them.
- Use Font Squirrel Webfont Generatorto convert downloaded TTF files to CSS file with base64 embedded WOFF fonts (Expert options -> CSS -> Base64 Encode).
- Load CSS file async (not important here).
- 在Google Web Fonts上选择字体并下载它们。
- 使用Font Squirrel Webfont Generator将下载的 TTF 文件转换为嵌入了 base64 WOFF 字体的 CSS 文件（专家选项 -> CSS -> Base64 编码）。
- 异步加载 CSS 文件（此处不重要）。
CSS snippet for Open Sans Bold:
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;
}
The problem is, that converted fonts look a lot different. Take a look at Open Sans Bold:
该问题是，该转换后的字体看起来非常不同。看看 Open Sans Bold：
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.).
尤其要注意口音和绝对可怕的字母a。其他字体系列和变体看起来也非常明显不同（大小和形状扭曲等）。
So the question is: How do you properly encode TTF files from Google Web Fonts (or other source) to base64 format and use it in a way that the result is identical to the original file?
所以问题是：您如何将来自 Google Web Fonts（或其他来源）的 TTF 文件正确编码为 base64 格式，并以与原始文件相同的方式使用它？
回答by djangodude
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.
在 Font Squirrel Expert 选项中，确保将“TrueType Hinting”选项设置为“Keep Existing”。其他选项中的任何一个都会导致 TrueType 指令（提示）被修改，这反过来又会影响字体的呈现。
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:
或者，如果您对直接从 GWF 呈现字体感到满意，您可以直接获取该文件并自己进行 base64 编码。在 OS X 或 Linux 中，在终端/shell 中使用内置的 base64 命令：
$ base64 myfont.ttf > fontbase64.txt
$ base64 myfont.ttf > fontbase64.txt
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:
对于 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;
}
(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)
（请注意，您可能需要对各种 @font-face 信息进行一些调整以匹配您的特定字体数据；这只是一个示例模板）
回答by Ilyich
Use this code snippet to base64 encode your font directly in the browser (OS independent, no need to install anything)
使用此代码片段直接在浏览器中对您的字体进行 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)">Then copy the output and paste it into your CSS:
然后复制输出并将其粘贴到您的 CSS 中：
@font-face {
font-family: 'myfont';
src: url("<<copied base64 string>>");
}
