有人可以解釋字體松鼠使用的BASE64 CSS

Question

我一直在使用字體松鼠生成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方案，它提供了一種內聯包含數據的方法。

基本上，您是將字體文件轉換為瘋狂的長字符串，可以將其直接粘貼在字體表述中以替換字體文件源鏈接。

數據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，並且似乎可以很好地解決阻止字體文件類型的愚蠢主動防火牆默認情況下。

實際上，我前一段時間對此寫了一篇文章。

Answer 2

我的猜測是，這是針對Internet Explorer版本之間不同的數據URI支持的解決方法。 IE 6-7不支持，IE 8僅支持某些元素，最大支持32KB，IE9 +可以正常工作。 有關數據URI支持的更多信息，請參見Wikipedia和caniuse 。 字體松鼠的'base64 CSS'選項使用數據URI編碼。