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

  合適的字體,對網(wǎng)頁的美觀度(或可讀性)有著舉足輕重的影響。

  但是,相比英文字體,中文字體的網(wǎng)頁開發(fā)有著極大的局限性。因?yàn)?,一套中文字體最少也要有幾千個(gè)字符,體積為幾個(gè)MB;單單為了瀏覽網(wǎng)頁,開發(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)頁元素所使用的字體。下面是一個(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)。比如,對于繁體字來說,微軟正黑(Microsoft JhengHei)是無襯線體,新細(xì)明體(PMingLiU)是襯線體。

  對于簡體字來說,微軟雅黑(Microsoft yahei)是無襯線體,宋體(SimSun)是襯線體。

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

  五、幾種常見中文字體

 ?。?)宋體(SimSun)

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

 ?。?)微軟雅黑(Microsoft YaHei)

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

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

 ?。?)仿宋(FangSong)

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

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

  (4)楷體(KaiTi)

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

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

  哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無需額外費(fèi)用,即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)