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;

使用範例:

<style type="text/css">
* {
margin:0;
padding:0;
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;
}
</style>

.

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

使用範例:

<style type="text/css">
* {
margin:0;
padding:0;
font-family:Microsoft YaHei,SimSun,sans-serif;
}
</style>

.

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

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

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

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

發表迴響