CCS Font 知識整理總結

老是搞不懂 CCS 中如何正確的使用字體，這下明白了。

一、什麼是 font-face

font-face 顧名思義，就是文字的臉。字體是文字的外在形式，就是文字的風格，是文字的外衣。好比行書、楷書、草書，都是一種字體。一樣一個字每一個人寫起來都會有差別，能夠說每一個人都有一套潛在的字體庫。對於web頁面來講，字體就是計算機上存儲的一套文字顯示方式。經過對文字進行一些特殊處理（好比末端增強）來提升不一樣環境中文字的可讀性。

二、什麼是 font-family

關於 font-family 的介紹大多數只是說明他能夠設置文本中的字體名稱序列。其實 font-family 真正的做用是將一系列近似的字體按照優先級順序組成一個列表，瀏覽器從第一項開始依次查找，找到第一種可用的字體來顯示文字。

font-family: Times New Roman,"open-sans","幼圓",sans-serif

當瀏覽器顯示一個字符時，會首先從 Times New Roman 中尋找這個字符，若是找到就用 Times New Roman 字體來顯示這個字符。若是沒找到就去 open-sans 中尋找，若是找到就用該字體顯示字符，沒找到就會依次尋找下去，若是在通用字體庫 sans-serif 中也沒有找到就會用一個缺字符代替（一般是小方框）。

<p style='font-family: Times New Roman,"open-sans","幼圓",sans-serif'>
    <span>時間就是金錢</span><span>Time is money.</span>
</p>

好比上面這段代碼，對於漢字部分瀏覽器會先去 Times New Roman 中查找，沒有找到，接着再去 open-sans 中查找，仍然沒有找到，繼續到「幼圓」中尋找，幼圓中能夠找到對應字符則用該字體來顯示。對於英文部分能夠在 Times New Roman 中尋找則會用該字體來顯示。

font-family 中有時候字體加引號有時候不加引號。區別在於對字體名稱中空格的處理不一樣。不加引號時，忽略字體左右兩端的空白字符，單詞之間的空白字符被解釋爲一個空白字符。