最佳答案
我想推迟字体加载在我的网站启发 Smashing Magazine 的延迟字体加载逻辑。
主要工作是将字体转换为 base64并准备 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;
}
转换了 字体看起来很不一样的 问题是。看看 Open Sans Bold:
特别是注意口音偏离和绝对可怕的字母 a
。其他字体系列和变体看起来也有很明显的不同(大小和形状失真等)。
所以问题是: 如何正确地将来自 GoogleWebFonts (或其他来源)的 TTF 文件编码为 base64格式,并以与原始文件相同的方式使用它?