首页 文章

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

提问于
浏览 次
37

我想在我的网站上推迟字体加载，灵感来自deferred font loading logic for Smashing Magazine .

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

  • 在Google Web Fonts上选择字体并下载它们 .

  • 使用Font Squirrel Webfont Generator将下载的TTF文件转换为带有base64嵌入式WOFF字体的CSS文件（专家选项 - > CSS - > 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;
}

problem is ，转换 fonts look a lot different . 看看Open Sans Bold：
GWF vs base64 rendering comparison

尤其是注意口音的方式和绝对可怕的字母 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?

css fonts base64 webfonts google-webfonts

1 回答

  • 57

    在Font Squirrel Expert选项中，确保将'TrueType Hinting'选项设置为'Keep Existing' . 任何其他选项都将导致修改TrueType指令（提示），这将反过来影响字体的呈现 .

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

    $ base64 myfont.ttf > fontbase64.txt

    对于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;
}

    （请注意，您可能需要对各种@ font-face信息进行一些调整以匹配您的特定字体数据;这只是一个示例模板）

    回复于

相关问题