先載入Google字體,再載入CSS

 

將Google導入代碼放在html HEAD標籤之後,即使在載入CSS檔之前,也要先載入html HEAD標籤。這樣可以確保字體在CSS之前載入,這樣就不會在最後載入字體時出現任何意外的 “跳轉”。實際上,這在我最近看到的網站中已經很常見了。

 

使用連結格式

 

有3種方式可以載入Google Fonts的 @import、link rel和javascript。link rel標籤可以讓你將代碼放在html上,並在CSS檔之前以最快的速度載入。

 

下面是一個例子。

http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>

 

@import代碼需要插入到CSS檔中,雖然你可以在CSS檔的頂部添加,但仍然可能會得到一個非styled的文本(fout)’,導致使用者體驗不佳,如上文所述。

 

更少的字體

 

你的網站真的需要6種不同的字體嗎?當然不需要。最好在設計時最多使用兩種字體 “一種粗體字用於標題,一種高可讀性字體用於正文。很明顯,你選擇的字體越多,從Google上載入的字體就越多,頁面載入速度就越慢。

 

組合你的字體代碼

 

你可以用一行代碼載入多個Google字體。這意味著你不需要為你載入的每個字體都有單獨的代碼行。請看下面的例子,我將Open Sans和Fenix字體結合在一起。

 

http://fonts.googleapis.com/css?family=Open+Sans|F… rel=’stylesheet’ type=’text/css’>

 

結論

 

像你的網站中的每一個其他元素一樣,保持最小化。如果您正在載入的字體載入速度較慢,請嘗試一下這些Tips,看看是否有什麼不同。根據您網站的大小,它優化的程度也會有所不同,你可以在Chrome的檢查元素功能中(F12)看到以毫秒為單位的優化,相信我,以上每一點對SEO都很重要。如果你喜歡我們的文章,請分享出去讓更多人看到。