CSS3中的這種字體如何嵌入到css文件中？

我一直在尋找如何加快頁面加載時間，我必須自定義CSS3 @ font-face字體加載到頁面中。CSS3中的這種字體如何嵌入到css文件中？

我一直在尋找一些其他網站的源代碼，發現他們有字體，不知何故，嵌入式的CSS文件中（只要我可以告訴）。

下面是basecamp.com的樣本，如果你在CSS文件看看有嵌入到CSS的字體：

@font-face { 
    font-family: 'ProximaNova'; 
    src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAA0ABIAAA...[redacted]..xBeTUFYWAA==) format("woff"), url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQAABAAgRkZUTWAFSKIAAAE...[redacted]...EsBYgRbIVHgIrsQNGditEWbAUKw==) format("truetype"), url("/assets/fonts/ProximaNova-Reg-webfont.svg#ProximaNovaRegular") format("svg"); 
    font-weight: normal; 
    font-style: normal; }

，你會如何去打開字體爲這種格式？這個怎麼用？

能剃光幾百毫秒的加載時間並減少了對服務器的請求，這樣看起來整體是一個好主意。

謝謝。

來源

2012-04-10 Smickie

的data URLs允許嵌入實際資源數據到一個URL本身。對於小資源非常方便，但對於大資源非常方便，因爲它們被編碼爲base64並導致嵌入的文本資源膨脹。

你需要做的是編碼使用的base64編碼（有一些網上的轉換器，像this one）各自的字體文件，然後指定數據URL正確的內容類型。

來源

2012-04-10 10:20:33

CSS3中的這種字體如何嵌入到css文件中？

回答

相關問題