CSS 中文字形指定

回覆文章
yehlu
Site Admin
文章: 3244
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

CSS 中文字形指定

文章 yehlu »

代碼: 選擇全部

font-family: "DFHeiStd-W7","華康黑體 Std W7"
需同時下2個名字,字體的檔名,及字形的名稱

http://blog.roodo.com/rocksaying/archives/3124027.html

CSS 的字型名稱有兩種表示方式,一種是「全名」,另一種是「泛用族名」。「全名」是字型的完整名稱,如「標楷體」、「simhei」。若全名中包含空白字元,則必須使用引號括起名稱;如 "DFXingShu STD W5"、"cwTeX 楷書"。「泛用族名」則是由 CSS 預先定義之泛用名稱,常用者為 serif, sans-serif(*1*1 參閱果正札記:《serif vs sans-serif》), monospace 。使用泛用族名時不可用引號括起。通常我們將泛用族名寫在字型列表的最後一個。

在網頁中使用中文字型時,最大的困擾在於瀏覽器辯識字型名稱的方式不一致。此因中文字型往往具有兩個字型名稱,一為中文名稱,一為英文名稱。例如「標楷體」即為一例,其另有英文名稱「DFKai-sb」。仍以標楷體為例,若在 Windows 2k/XP 之「地區及語言選項」設定為「中文(台灣)」時, IE 只認字型的中文名稱「標楷體」;但若地區不是「中文(台灣)」時, IE 只認英文名稱「DFKai-sb」。故我們必須同時寫出字型的兩個名稱才行。

http://blog.roodo.com/wolf_totem/archives/4747565.html

關於 CSS 設定 font-family 研究
實在沒想到,單單一個 font-family 設定竟然扯出許多學問。起初的原因是 Safari for Windows 的瀏覽器無法正常顯示我網頁中的字型。所以只好進行 CSS 研究。


字型名稱有空白時需加上引號

起初我所看到的內容,如英文名中間有空白時應該使用引號,這我不覺得意外。

中文字型應寫入兩種名稱 (中文名稱 + 英文名稱)

我的研究顯示,中文字型通常有兩個名字,在不同的系統及不同的瀏覽器可能接受的名稱不同。正確的作法是把字型的中文名稱及英文名稱加入。 (例如 中文版 Windows 的 IE 只看得懂 "新細明體",而英文版 Windows 的 IE 只看得懂 "PMingLiU")

常見的繁體字型的英文名稱:

* 微軟正黑體 : Microsoft JhengHei
* 新細明體 : PMingLiU
* 細明體 : MingLiU
* 標楷體 : DFKai-sb


font-family 最後加上泛用字族 (generic-family)

font-family 其實能接受兩種值,第一種是「字體名稱」(family-name),第二種是「通用字體集」(generic-family) 。

「字體名稱」如「Arial、新細明體、標楷體…」這些字型名稱,在此不必多言。

「通用字體集」常用有五種,功能是把類似字體樣式歸類,當在不同作業系統或是瀏覽器執行,發生找不到字型時,由字體集挑出字型代替。

而且通常把「通用字體集」寫在 font-family 最後一個值

常用的五種字體集名稱及意義:
字體集名稱 意義 範例
serif 襯線字 generic-family: serif
sans-serif 無襯線字 generic-family: sans-serif
cursive 捲曲字體 generic-family: cursive
fantasy 花俏字體 generic-family: fantasy
monospace 等寬字體 generic-family: monospace

PS: 「通用字體集」不能加入引號括住。

最好了解「襯線字 (serif)」和「無襯線字 (sans serif) 」意義及使用時機,為你的網站加分
回覆文章

回到「HTML + CSS」