我想推迟在我的网站上加载字体，灵感来自deferred font loading logic for Smashing Magazine.
这项工作的主要部分是将字体转换为base64并准备CSS文件.到目前为止，我的步骤如下:
- Select Google Web Fonts种字体并下载它们.
- Use Font Squirrel Webfont Generator to convert downloaded TTF files to CSS file with base64 embedded WOFF fonts (Expert options -> CSS -> Base64 Encode).
- 异步加载CSS文件(这里不重要).
开放式SAN的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;
}
problem is，也就是转化成fonts look a lot different的那个.看看Open Sans Bold:
特别要注意的是，口音偏离了很远，还有绝对可怕的字母a.其他字体系列和变体看起来也非常不同(大小和形状扭曲等).
所以问题是: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?