本文主要介紹字體加載優化的常用策略，大部分內容為引用和翻譯。

一、 font-face基本用法

font-face的基本用法想必大家都是知道的，基本上就是類似這樣：

這樣就可以使我們的網頁用上自定義字體了。 除了font-family 和 src屬性之外，還擁有font-style以及font-weight屬性。 src可以指定多種字體，會按順序依次適用，比如上面的示例中會先加載woff2字體，如果失敗再加載woff字體，否則加載opentype字體。 src所支持的字體可以有以下類型：

src參數帶不帶引號都可以，參數的格式不同含義也不盡相同，比如下面：

src中加載的字體地址受跨域的約束，如果想跨域加載字體，需要設置CORS。

這就是font-face的最基礎的用法。 接下來我們會進一步分析font-face的用法，并盡可能的找出優化策略。

二、 什么時候會下載字體？

上面講了字體的基本知識，那你有沒有想過，字體是在什么時候下載的呢？當我們僅僅在CSS中定義如下樣式的時候, 頁面加載，字體會自動下載嗎？

很遺憾，字體并不會下載。 通常情況 下，只有當我們的頁面元素用到了font-face中定義的字體的情況下，才會下載對應的字體。

注意: 這里我們說了是通常情況，這是因為，IE8在只要是定義了font-face，即使頁面元素沒有使用對應的字體，也會下載。

在其它瀏覽器中也不盡相同，

比如在 Firefox 和 IE 9+ 中，遇到如下情況也會下載字體：

html

css

有什么特別之處呢？ 你可能注意到了，這個元素雖然使用到了font-family: Lato樣式，但是這個元素并沒有任何文本啊！！！。 按照我們的理想情況，應該是，只有有文字內容才會去下載字體嘛。 而這就是Chrome, Safari (WebKit/Blink 等)瀏覽器的行為。