1

一段时间以来，我一直在使用字体松鼠来生成网络字体。通常它给出的 CSS 是这样的：

@font-face {
    font-family: 'sancoale_slsf_norm_regunormRg';
   src: url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.eot');
    src: url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.eot?#iefix') format('embedded-opentype'),
         url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.woff') format('woff'),
         url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

但是在将 WOFF 生成为 base64 时，输出的 CSS 会更改为：

 @font-face {
font-family: 'sancoale_slsf_norm_boldnormBd';
src: url('sancoaleslsfnormbold-webfont.eot');
}

@font-face {
font-family: 'sancoale_slsf_norm_boldnormBd';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09 [BLABLABLA] =) format('woff'),
     url('sancoaleslsfnormbold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

有谁知道为什么 @font-face 声明被拆分？- 真的很感兴趣！

4

2 回答 2

7

Base64是一种二进制到文本的编码方案，它以 ASCII 字符串格式表示二进制数据。

数据 URI只是一种 URI 方案，它提供了一种内嵌数据的方式。

基本上，您将字体文件转换为一个疯狂的长文本字符串，您可以将其粘贴到您的字体声明中以替换字体文件源链接。

数据 URI 方案是：

data:[<mediatype>][;base64],<data>

@font-face 中的 Base 64 源代码如下所示：

src: url(data:application/x-font-woff;charset=utf-8;base64,<your base64 font>) format('woff'),

Font Squirrel 的生成器提供了 .eot 文件，因为 IE 对 Base64 的支持始于版本 9（我认为）。

我发现这种字体方法比 Paul Irish 的防弹方法具有更高的可传递性。

Fonts.css
在实践中，我将所有 base64 编码字体（加上粗细变化）放入 fonts.css 文件中。这还包括我的图标字体——我使用IcoMoon 的网络应用程序来构建和获取 base64。

是的，base64 增加了一些体积，它肯定不漂亮，但是将它们全部放入一个中央 fonts.css 文件会减少您的请求，防止 FOUC，并且似乎在绕过阻止字体文件类型的愚蠢攻击性防火墙方面做得很好默认。

实际上，我不久前写了一篇关于此的小帖子。

于 2013-12-25T11:12:02.150 回答
0

我的猜测是，这是 Internet Explorer 版本之间不同数据 URI 支持的解决方法。IE 6-7 不支持，IE 8 只支持一些元素，最大只能到 32KB，而 IE9+ 据说可以正常工作。有关数据 URI 支持的更多信息，请参见Wikipedia和caniuse。font squirrel 的“base64 CSS”选项使用数据 URI 编码。

于 2013-07-31T21:46:48.490 回答