我們在日常需求中,經常會碰到視覺設計師對某個中文字體效果非常堅持的情況,因為頁面是否高大上,字體選擇是很重要的一個因素,選擇合適的字體可以讓頁面更優雅。面對這種問題,我們通常以下方式來進行設計還原:使用圖片背景還原設計,即使用 photoshop 將文本圖層單獨導出成網頁背景圖片。
產生的問題
制作與維護成本很高。切圖繁瑣、高清屏適配繁瑣、合并雪碧圖更繁瑣,后期修改更加繁瑣。
用戶體驗差。導致網頁不支持選中、復制、搜索、翻譯、矢量縮放,也會影響視障用戶使用讀屏器操作網頁。
帶來更多帶寬消耗。導出的圖片體積隨著文本面積增加,且字形無法重復利用,這消耗著大量的服務器資源。
WebFont技術提供了在網頁使用特殊字體的可能,從而避免用圖片的方法。它的實現方法是通過CSS的@font-face引入字體。很多互聯網公司已經率先采用了這種方法,比如Apple官網就是采用了自己的字體。Google也推出了免費的WebFont云托管服務,在國外網站自定義字體得到很好的應用。
在中文方面自定義字體卻遲遲沒有廣泛應用,這是有什么原因呢?
中文WebFont的困境
1、中文字體體積大
英文字體文字部分由26個字母組成,所以字體文件通常不會太大;相比英文字體,中文字體的網頁開發有著極大的局限性。因為,一套中文字體最少也要有幾千個字符,體積為幾個MB;單單為了瀏覽網頁,開發者不可能讓用戶去下載字體,只能依靠操作系統的預裝字體。(*注:確實有網站提供中文字體的web服務,從技術角度,我不推薦這樣做。)
2、瀏覽器支持
不同瀏覽器對字體的支持也是不同的,沒有一種可以支持所有瀏覽器的字體,這就要求我們針對不同的瀏覽器制作不同的字體。(N=Not supported, P=Partial support, Y=Supported)
不同的操作系統、不同的版本預裝不同的字體(因為版權),幾乎沒有交集。因此,大多數開發者索性忽略中文字體,讓操作系統自行渲染,或者用圖片呈現字體效果。
下面是目前中文字體的最佳實踐,主要參考了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)。
---- END ----