繁体   English   中英

有人可以解释字体松鼠使用的BASE64 CSS

[英]Could Someone Explain the BASE64 CSS used by 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声明被拆分? -真的很感兴趣!

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,并且似乎可以很好地解决阻止字体文件类型的愚蠢主动防火墙默认情况下。

实际上,我前一段时间对此写了一篇文章。

我的猜测是,这是针对Internet Explorer版本之间不同的数据URI支持的解决方法。 IE 6-7不支持,IE 8仅支持某些元素,最大支持32KB,IE9 +可以正常工作。 有关数据URI支持的更多信息,请参见Wikipediacaniuse 字体松鼠的'base64 CSS'选项使用数据URI编码。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM