中文字體網頁開發指南

        字體的選擇，是網頁開發的關鍵因素之一。

        合適的字體，對網頁的美觀度（或可讀性）有著舉足輕重的影響。

        但是，相比英文字體，中文字體的網頁開發有著極大的局限性。因為，一套中文字體最少也要有幾千個字符，體積為幾個 MB；單單為了瀏覽網頁，開發者不可能讓用戶去下載字體，只能依靠操作系統的預裝字體。（*注：確實有網站提供中文字體的 web 服務，從技術角度，我認為這樣做不可取。）

        不同的操作系統、不同的版本預裝不同的字體（因為版權），幾乎沒有交集。因此，大多數開發者索性忽略中文字體，讓操作系統自行渲染，或者用圖片呈現字體效果。

        下面是目前中文字體的最佳實踐，主要參考了 Kendra Schaefer 的文章。

        一、操作系統的預裝字體

        操作系統決定了開發者可以使用的字體。所以，第一步，我們必須了解操作系統到底提供哪些字體。

        Windows 操作系統：

• 黑體：SimHei
• 宋體：SimSun
• 新宋體：NSimSun
• 仿宋：FangSong
• 楷體：KaiTi
• 仿宋GB2312：FangSongGB2312
• 楷體GB2312：KaiTiGB2312
• 微軟雅黑：Microsoft YaHei （Windows 7 開始提供）

        OS X 操作系統：

• 冬青黑體: Hiragino Sans GB （SNOW LEOPARD 開始提供）
• 華文細黑：STHeiti Light （又名 STXihei）
• 華文黑體：STHeiti
• 華文楷體：STKaiti
• 華文宋體：STSong
• 華文仿宋：STFangsong

        如果用戶裝了MicroSoft Office，還會多出一些字體。

• 隸書：LiSu
• 幼圓：YouYuan
• 華文細黑：STXihei
• 華文楷體：STKaiti
• 華文宋體：STSong
• 華文中宋：STZhongsong
• 華文仿宋：STFangsong
• 方正舒體：FZShuTi
• 方正姚體：FZYaoti
• 華文彩云：STCaiyun
• 華文琥珀：STHupo
• 華文隸書：STLiti
• 華文行楷：STXingkai
• 華文新魏：STXinwei

        二、font-family 命令

        CSS 的 font-family 命令，指定了網頁元素所使用的字體。下面是一個例子。

font-family: Georgia, "Times New Roman", 
                 "Microsoft YaHei", "微軟雅黑", 
                 STXihei, "華文細黑", 
                 serif;

        它的規則有三條。

1. 優先使用排在前面的字體。
2. 如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。
3. 如果所列出的字體，都無法滿足需要，則讓操作系統自行決定使用哪種字體。

        根據這些規則，font-family 應該優先指定英文字體，然后再指定中文字體。否則，中文字體所包含的英文字母，會取代英文字體，這往往很丑陋。

        上面圖片中，紅框內的英文字母，左邊采用英文字體渲染，右邊采用中文字體渲染，哪一種效果比較好，一目了然。

        為了保證兼容性，中文字體的中文名稱和英文名稱，應該都寫入 font-family。比如，"微軟雅黑"的英文名稱是 Microsoft YaHei。

        此外，中文字體的中文名稱，以及由多個單詞組成的英文名稱，應該放在雙引號內。

        三、 Windows 平臺和 Mac 平臺

        由于 Windows 和 Mac 的中文字體沒有交叉，所以應該同時為兩個平臺指定字體。

        常見的做法是，Windows 平臺指定"微軟雅黑"（Microsoft YaHei），Mac 平臺指定"華文細黑"（STXihei）。

        四、襯線體和無襯線體

        所謂"襯線體"（Serif），指的是筆畫的末端帶有襯線的字體。

        就像英文字體一樣，中文字體也可以分成"襯線體"和"無襯線體"（San-serif）。比如，對于繁體字來說，微軟正黑（Microsoft JhengHei）是無襯線體，新細明體（PMingLiU）是襯線體。

        對于簡體字來說，微軟雅黑（Microsoft yahei）是無襯線體，宋體（SimSun）是襯線體。

        一般來說，襯線體裝飾性強，往往用于標題；無襯線體清晰度好，往往用于正文。

        五、幾種常見中文字體

        （1）宋體（SimSun）

        最常見的中文字體，如果沒有指定字體，操作系統往往選擇它來渲染。很多人認為，這種字體并不美觀。

        （2）微軟雅黑（Microsoft YaHei）

        微軟雅黑的美觀度和清晰度都較好，可以作為網頁的首選字體。它在 Mac 平臺的對應字體是華文細黑（STXihei）。

        但是，Windows XP 沒有預裝這種字體，這時操作系統往往會選擇黑體（Simhei）取代。

        （3）仿宋（FangSong）

        這種字體是襯線體，比宋體的裝飾性更強。如果字號太小，會影響清晰度，所以只有在字號大于 14px 的情況下，才可以考慮這種字體。

        它在 Mac 平臺的對應字體是"華文仿宋"（STFangsong）。

        （4）楷體（KaiTi）

        楷體也是襯線體，裝飾性與仿宋體接近，但是寬度更大，筆畫更清楚一些。這種字體也不應該在小于 14px 的情況下使用。

        它在 Mac 平臺的對應字體是"華文楷體"（STKaiti）。

                    <span id="shareA4" class="fl">                            
                        </span>