CSS字體中加載加速問題的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)CSS字體中加載加速問題的示例分析，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

除了各種特定字體系列外（如 Times、Verdana、Helvetica 或 Arial），CSS定義了 5 種通用字體系列：

Serif 字體
    這些字體成比例，而且有上下短線。如果字體中的所有字符根據(jù)其不同大小有不同的寬度，則成該字符是成比例的。例如，小寫 i 和小寫 m 的寬度就不同。上下短線是每個字符筆劃末端的裝飾，比如小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線。Serif 字體的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif 字體
    這些字體是成比例的，而且沒有上下短線。Sans-serif 字體的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace 字體
    Monospace 字體并不是成比例的。它們通常用于模擬打字機打出的文本、老式點陣打印機的輸出，甚至更老式的視頻顯示終端。采用這些字體，每個字符的寬度都必須完全相同，所以小寫的 i 和小寫的 m 有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個字體的字符寬度完全相同，則歸類為 Monospace 字體，而不論是否有上下短線。Monospace 字體的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字體
    這些字體試圖模仿人的手寫體。通常，它們主要由曲線和 Serif 字體中沒有的筆劃裝飾組成。例如，大寫 A 再其左腿底部可能有一個小彎，或者完全由花體部分和小的彎曲部分組成。Cursive 字體的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字體
    這些字體無法用任何特征來定義，只有一點是確定的，那就是我們無法很容易地將其規(guī)劃到任何一種其他的字體系列當(dāng)中。這樣的字體包括 Western、Woodblock 和 Klingon。

理論上講，用戶安裝的任何字體系列都會落入到上述某種通用系列中，但實際上可能并非如此，不過例外情況（如果有的話）往往很少。

然而，似乎大多數(shù)網(wǎng)站使用非默認(rèn)字體的這些天,但是誰能怪他們呢？系統(tǒng)字體都是很枯燥的，使用自定義字體能為一個網(wǎng)站增色不少。使用自定義字體所帶來的問題就是，會延緩你站點的加載。字體文件比較大，可能需要單獨的字體文件，粗體和斜體，并阻止渲染，如果開發(fā)商不解決它們。讓我告訴你一個更快速加載的方法。
1. 把字體放在CDN上

為提高網(wǎng)站的速度，一個簡單的解決方案是使用CDN，這對字體來說沒有什么差別。重要的是要確保CDN有適當(dāng)?shù)腃ORS設(shè)置
 

代碼如下:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
   Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
   add_header Access-Control-Allow-Origin *;
}

如果CDN的CORS設(shè)置不正確的話，你會看到AJAX/跨域錯誤控制臺。
2.使用非阻塞加載CSS
 
實質(zhì)上是使用media=none讓我們在瀏覽器下載樣式表而不會阻塞渲染，所以當(dāng)樣式表加載，media設(shè)置其所需的設(shè)置就會呈現(xiàn)在屏幕
3.單獨的字體選擇器

如果字體使用時沒有被加載完，用戶將看到空白，直到字體加載。這，當(dāng)然不是一件好事，如果字體加載失敗。最起碼，用戶將會在空白的地方盯著幾秒鐘。最好是配合被添加到body的字體加載后聲明自定義字體：

CSS 

1. h2 { font-family: Arial, serif; } /* 系統(tǒng)字體 */  

2. .fontsloaded h2 { font-family:  'MySpecialFont', serif; } /* 自定義字體 */  

3.     

4. <link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >  

通過使用字體聲明以上策略，系統(tǒng)加載字體最初只有在自定義加載字體將被啟用，因此屏幕不會顯示任何一段時間空內(nèi)容。我建議創(chuàng)建一個Stylus/Sass/Less的混合設(shè)置字體設(shè)置，自定義選擇器自動設(shè)置。

關(guān)于CSS字體中加載加速問題的示例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。