有人可以解释font squirrel使用的BASE64 CSS

Question

我一直在使用font squirrel来生成web字体.通常它给出的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声明被拆分了？ - 真的很感兴趣!

Answer 1

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

数据URI只是一种URI方案,它提供了一种在线包含数据的方法.

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

数据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文件,因为对Base64的IE支持从版本9开始(我认为).

我发现这种font-face方法比Paul Irish的防弹方法具有更高的可传递性.

Fonts.css
在实践中,我将所有base64编码字体(加上重量变化)抛出到fonts.css文件中.这还包括我的图标字体 - 我使用IcoMoon的网络应用程序来构建和获取base64.

是啊,BASE64增加了一些散装,它肯定是不漂亮,但把他们全部纳入中央fonts.css文件减少了您的请求,防止FOUC,并似乎做得到阻断字体文件类型周围愚蠢侵略性防火墙的一个伟大的工作作为默认值.

我实际上在这一段时间写了一篇文章.