CSS font family 字型字體之介紹與小範例

轉錄自: http://zfly9.blogspot.tw/2012/09/css-font-family.html

css 的 font-family 字型,字體 這個參數設置 …真的是一大學問，實在太複雜，這邊就以簡單為主做介紹。

＊ font-family 分兩種設置值，一種是通用字體集(generic-family)，另一種是字體名稱(family-name)

通用字體集(generic-family)，如：

襯線字　 serif
無襯線字 sans-serif
捲曲字體 cursive
花俏字體 fantasy
等寬字體 monospace

通用字體集(generic-family)，應該是每個瀏覽器必備內建字體包，
可以看成，當family-name都找不到，就用generic-family內的字體包，
所以放在 font-family 參數最後面，一般都用 sans-serif

字體名稱(family-name)，如：

下述為英數及符號部份：
Arial
Tahoma
Helvetica
Comic Sans MS
Georgia
Time New Roman

下述為中文字部份：
微軟雅黑體 Microsoft YaHei
微軟正黑體 Microsoft JhengHei
新細明體　 PMingLiU
細明體　　 MingLiU
標楷體　　 DFKai-sb
宋体　　　 SimSun

字體名稱(family-name)，應該算是瀏覽器自訂字體包吧，
如非中文語系，可能沒有細明體、標楷體…等字體包，
不過我想那應該是早期瀏覽器，現今大家常用瀏覽器，
IE Firefox Chrome 應該都包含了各種字體包。

.

＊ 字體名稱(family-name)，內有空白時需加上引號(單引或雙引)

例：Microsoft YaHei、Microsoft JhengHei 中間有空白，使用時要加引號。

後來測試，英文字中間有空白，前後不加單引或雙引號也是ok。

.

＊ 中英文字體名稱都添加

該如何說，如果你只使用中文，如下：
font-family: 細明體;

那麼英文及非中文語系，無法辨識，比較好是中英都添加：
font-family: 細明體,MingLiU;

不過我有測試3種瀏覽器，其實只要用英文就可以了。

.

＊ 依順序，由左至右查找

font-family: Arial,MingLiU,sans-serif;

這段意思是，先跑 Arial 但這只有英數符號，遇到中文字則跑 MingLiU 細明體，

如果前2者的字體包都沒有，則跑 sans-serif 。

如果有要求 英數及符號 和 中文字 不同字型時，則英數及符號放第1個，

中文放第2個…以此類推，例：

英數及符號用 Georgia ，而中文字用 微軟正黑體 ，語法如下：

font-family:Georgia,Microsoft JhengHei,sans-serif;

.

＊ 字型及字體大小，顯示結果不同

常用的 12px 及 14px 或更大字體，顯示上，會有點出入，大致上不用太在意，

編寫時，最好用 IE Firefox Chrome 這3種瀏覽器分別檢視一下，選一種看起來順眼的。

.

<

>＊ 實在太複雜，我這裡列了一段，推薦用法：

繁體用戶原則上用：
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;

使用範例：

.

簡體用戶原則上用：
font-family:Microsoft YaHei,SimSun,sans-serif;

使用範例：

.

*是全局設置也可以用body，邊界及內界最好開頭設0，避免有些瀏覽器預設值不是0

原本想加入 Helvetica 算是大家常用的，但IE9好像有點問題，就不添加了。

2013年2月3日更新一下，去掉Tahoma，改成微軟正黑、細明體(繁),微軟雅黑、宋體(簡)，避免舊IE瀏器英數中字不對齊。

2013年3月28日更新一下，繁體在 google chrome 微軟正黑體無法顯示處理 ，及去掉微軟正黑雅黑英文前後雙引號。