日誌

為什么現在web上的中文字體可供選擇的非常少?


我們在日常需求中,經常會碰到視覺設計師對某個中文字體效果非常堅持的情況,因為頁面是否高大上,字體選擇是很重要的一個因素,選擇合適的字體可以讓頁面更優雅。面對這種問題,我們通常以下方式來進行設計還原:使用圖片背景還原設計,即使用 photoshop 將文本圖層單獨導出成網頁背景圖片。

36-1.jpg

產生的問題


  • 制作與維護成本很高。切圖繁瑣、高清屏適配繁瑣、合并雪碧圖更繁瑣,后期修改更加繁瑣。

  • 用戶體驗差。導致網頁不支持選中、復制、搜索、翻譯、矢量縮放,也會影響視障用戶使用讀屏器操作網頁。

  • 帶來更多帶寬消耗。導出的圖片體積隨著文本面積增加,且字形無法重復利用,這消耗著大量的服務器資源。


WebFont技術提供了在網頁使用特殊字體的可能,從而避免用圖片的方法。它的實現方法是通過CSS的@font-face引入字體。很多互聯網公司已經率先采用了這種方法,比如Apple官網就是采用了自己的字體。Google也推出了免費的WebFont云托管服務,在國外網站自定義字體得到很好的應用。


在中文方面自定義字體卻遲遲沒有廣泛應用,這是有什么原因呢?


中文WebFont的困境


1、中文字體體積大


英文字體文字部分由26個字母組成,所以字體文件通常不會太大;相比英文字體,中文字體的網頁開發有著極大的局限性。因為,一套中文字體最少也要有幾千個字符,體積為幾個MB;單單為了瀏覽網頁,開發者不可能讓用戶去下載字體,只能依靠操作系統的預裝字體。(*注:確實有網站提供中文字體的web服務,從技術角度,我不推薦這樣做。)


2、瀏覽器支持


不同瀏覽器對字體的支持也是不同的,沒有一種可以支持所有瀏覽器的字體,這就要求我們針對不同的瀏覽器制作不同的字體。(N=Not supported, P=Partial support, Y=Supported)


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




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


一、操作系統的預裝字體


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


36-2.png


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應該優先指定英文字體,然后再指定中文字體。否則,中文字體所包含的英文字母,會取代英文字體,這往往很丑陋。


36-3.jpg


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


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


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


三、Windows和Mac平臺


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


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


四、襯線體和無襯線體


所謂"襯線體"(Serif),指的是筆畫的末端帶有襯線的字體。


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


36-4.png


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


36-5.png


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


五、幾種常見中文字體


(1)宋體(SimSun)


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


36-6.jpg


(2)微軟雅黑(Microsoft YaHei)


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


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


36-7.jpg


(3)仿宋(FangSong)


這種字體是襯線體,比宋體的裝飾性更強。如果字號太小,會影響清晰度,所以只有在字號大于14px的情況下,才可以考慮這種字體。它在Mac平臺的對應字體是"華文仿宋"(STFangsong)。


36-8.jpg


(4)楷體(KaiTi)


楷體也是襯線體,裝飾性與仿宋體接近,但是寬度更大,筆畫更清楚一些。這種字體也不應該在小于14px的情況下使用。它在Mac平臺的對應字體是"華文楷體"(STKaiti)。


36-9.jpg


---- END ----


回最頂