字體的選擇，是網(wǎng)頁(yè)開發(fā)的關(guān)鍵因素之一。

合適的字體，對(duì)網(wǎng)頁(yè)的美觀度（或可讀性）有著舉足輕重的影響。

但是，相比英文字體，中文字體的網(wǎng)頁(yè)開發(fā)有著極大的局限性。因?yàn)?#xff0c;一套中文字體最少也要有幾千個(gè)字符，體積為幾個(gè)MB；單單為了瀏覽網(wǎng)頁(yè)，開發(fā)者不可能讓用戶去下載字體，只能依靠操作系統(tǒng)的預(yù)裝字體。（*注：確實(shí)有網(wǎng)站提供中文字體的web服務(wù)，從技術(shù)角度，我不推薦這樣做。）

不同的操作系統(tǒng)、不同的版本預(yù)裝不同的字體（因?yàn)榘鏅?quán)），幾乎沒有交集。因此，大多數(shù)開發(fā)者索性忽略中文字體，讓操作系統(tǒng)自行渲染，或者用圖片呈現(xiàn)字體效果。

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

一、操作系統(tǒng)的預(yù)裝字體

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

Windows操作系統(tǒng)：

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

OS X操作系統(tǒng)：

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

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

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

二、font-family命令

CSS的font-family命令，指定了網(wǎng)頁(yè)元素所使用的字體。下面是一個(gè)例子。

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

它的規(guī)則有三條。

（1）優(yōu)先使用排在前面的字體。

（2）如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。

（3）如果所列出的字體，都無法滿足需要，則讓操作系統(tǒng)自行決定使用哪種字體。

根據(jù)這些規(guī)則，font-family應(yīng)該優(yōu)先指定英文字體，然后再指定中文字體。否則，中文字體所包含的英文字母，會(huì)取代英文字體，這往往很丑陋。

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

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

此外，中文字體的中文名稱，以及由多個(gè)單詞組成的英文名稱，應(yīng)該放在雙引號(hào)內(nèi)。

三、 Windows平臺(tái)和Mac平臺(tái)

由于Windows和Mac的中文字體沒有交叉，所以應(yīng)該同時(shí)為兩個(gè)平臺(tái)指定字體。

常見的做法是，Windows平臺(tái)指定"微軟雅黑"（Microsoft YaHei），Mac平臺(tái)指定"華文細(xì)黑"（STXihei）。

四、襯線體和無襯線體

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

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

對(duì)于簡(jiǎn)體字來說，微軟雅黑（Microsoft yahei）是無襯線體，宋體（SimSun）是襯線體。

一般來說，襯線體裝飾性強(qiáng)，往往用于標(biāo)題；無襯線體清晰度好，往往用于正文。

五、幾種常見中文字體

（1）宋體（SimSun）

宋體是最常見的中文字體，如果沒有指定字體，操作系統(tǒng)往往選擇它來渲染。很多人認(rèn)為，這種字體并不美觀。

（2）微軟雅黑（Microsoft YaHei）

微軟雅黑的美觀度和清晰度都較好，可以作為網(wǎng)頁(yè)的首選字體。它在Mac平臺(tái)的對(duì)應(yīng)字體是華文細(xì)黑（STXihei）。

但是，Windows XP沒有預(yù)裝這種字體，這時(shí)可以選擇黑體（Simhei）替代。不過，黑體比較粗，不應(yīng)用于字號(hào)較小的文字。

（3）仿宋（FangSong）

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

它在Mac平臺(tái)的對(duì)應(yīng)字體是"華文仿宋"（STFangsong）。

（4）楷體（KaiTi）

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

它在Mac平臺(tái)的對(duì)應(yīng)字體是"華文楷體"（STKaiti）。

轉(zhuǎn)載于:https://www.cnblogs.com/qiangxia/p/5424975.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的[转] 中文字体网页开发指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。