網(wǎng)頁在各平臺都顯示為最高質(zhì)量的黑體的方法

2013-11-27 14:24:06來源:知乎作者:梁海

我確實認為在目前常規(guī)的顯示屏上(臺式機、筆記本電腦、iPad……)還是必須用黑體才能保證正文字號的中文清晰易讀。(這里的「黑體」當然指的是字體的一類風格,并非 Windows 自帶的那個自稱「黑體」的「中易黑體(

我確實認為在目前常規(guī)的顯示屏上(臺式機、筆記本電腦、iPad……)還是必須用黑體才能保證正文字號的中文清晰易讀。(這里的「黑體」當然指的是字體的一類風格,并非 Windows 自帶的那個自稱「黑體」的「中易黑體(SimHei)」,中易黑體沒法用作正文字體,頂多在標題等大字號場所可以利用一下)。我不喜歡點陣宋體。 

所以,一般來說,我們確實需要保證自己的網(wǎng)頁設(shè)計在各平臺顯示時都能用上各平臺最佳的黑體。這需要一點分析,以及對 CSS 的 font-family 屬性的一點了解。 

一、各平臺最佳正文字體現(xiàn)狀: 

  • Windows 
    Windows 在 Vista 之前都以中易宋體(在 Windows 里顯示為宋體,英文名是 SimSun)為簡體中文默認字體,正文字號時為點陣字體,尚可接受,但字號稍大就奇丑無比。中易宋體沒有粗體,它的西文部分也完全沒法用。 
    從 Vista 開始,微軟提供了微軟雅黑作為新的簡體中文默認字體,這款字體跟上了時代,但褒貶不一。微軟雅黑有粗體,西文部分達到了 Windows 的水準。自己的網(wǎng)頁設(shè)計中要不要用微軟雅黑來顯示正文——這是一大抉擇。注意,決定用不用微軟雅黑時要考慮到 @pansz 說的 ClearType 問題:有一些 Windows 平臺(包括一些 Windows XP)會因為種種原因擁有微軟雅黑但卻沒開 ClearType,此時微軟雅黑的效果是很糟糕的。 
    Windows 的主要問題在于字體渲染技術(shù)極其落后,所以字體渲染效果非常受限。
  • Mac OS X 
    OS X 一直用華文黑體作簡體中文默認字體,這個字體族有常規(guī)體和粗體,西文部分很差勁(和中易宋體西文差的原因倒還不太一樣)。 
    從 OS X 10.6 開始,系統(tǒng)自帶了冬青黑體簡體中文(該字體在 10.7 以前沒有中文名,叫作Hiragino Sans GB)。這款字體至今沒有成為系統(tǒng)的簡體中文默認字體,但它是目前 OS X 最好的簡體中文字體。 
    OS X 的字體渲染技術(shù)顯然是目前所有操作系統(tǒng)中最佳的。 
    另外,OS X 還有一款叫 Hei Regular(family name 是「Hei」)的老舊字體——絕對不要再用它了,除非你知道自己在干什么。
  • iOS 
    自帶華文黑體。
  • GNU/Linux 
    Linux 社區(qū)常用的簡體中文介面字體似乎主要有文泉驛點陣宋體、文泉驛正黑和文泉驛微米黑,另有一些人把 Windows 或 OS X 的字體復(fù)制過去用。文泉驛點陣宋體類似于 Windows 的中易宋體,而文泉驛正黑是在無自由黑體可用的情況下被迫制作的質(zhì)量不太高的黑體。文泉驛微米黑是Linux 社區(qū)現(xiàn)有的最佳簡體中文界面字體,但它沒有粗體。但因為文泉驛微米黑的質(zhì)量也沒有絕對優(yōu)勢,加之 Linux 各發(fā)行版的情況非;靵y,所以或許不指定字體最好。 
    各 Linux 發(fā)行版默認的字體渲染效果參差不齊,成熟一些的(比如 Ubuntu)在某些方面會略強于 Windows。
  • Android 
    自帶 Droid Sans。文泉驛微米黑由 Droid Sans 衍生而來,主要擴展了它的中文部分(Droid Sans Fallback)。

二、所以,為網(wǎng)頁設(shè)定字體時有以下目的需要達成: 

  • 對于 Windows:在中易宋體和微軟雅黑之間二選一,加粗和較大字號的文本使用微軟雅黑。沒有微軟雅黑的系統(tǒng)會 fallback 到中易宋體。
  • 對于 OS X:盡量使用冬青黑體簡體中文。沒有冬青黑體簡體中文的系統(tǒng)會 fallback 到華文黑體。
  • 對于 iOS:系統(tǒng)會自動使用華文黑體。
  • 對于 Linux:盡量使用文泉驛微米黑。沒有文泉驛微米黑的系統(tǒng)會 fallback 到別的字體。
  • 對于 Android:系統(tǒng)會自動使用 Droid Sans。

三、要達到以上目的,CSS 的 font-family 屬性可以這么寫(中文字體之前的「…」代表西文字體,根據(jù)自己的口味選擇就好,比較自由): 

  • 控制(為 Windows 選擇微軟雅黑,為 Linux 選擇文泉驛微米黑): 
    font-family: … "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 
    為什么不把中易宋體(SimSun)、華文黑體(STHeiti〔10.6 之前〕或 Heiti SC〔從 10.6 開始〕)和 Droid Sans 寫出來?因為它們是系統(tǒng)默認字體,以上字體都沒有的話就會自動調(diào)用。除非你的用戶中很多人的系統(tǒng) locale 都不是中文,否則不必寫出 STHeiti 之類(如果要寫,請把它寫在 Hiragino Sans GB 和 Microsoft YaHei 中間)。中易宋體(SimSun)盡管身為宋體,在 Windows 中卻也是簡體中文 的默認 sans-serif 字體。
    注意:把冬青黑體簡體中文(Hiragino Sans GB)放在這么前面會在某些情況下出問題,詳見第四部分。
  • 自由(僅在 OS X 上盡量使用冬青黑體簡體中文,放任其他平臺使用默認字體): 
    font-family: … "Hiragino Sans GB", sans-serif; 
    這個方案沒法控制 Windows 到底用中易宋體還是微軟雅黑,于是正文字號的效果或許見仁見智,但大字號時如果用的是中易宋體就非常難看了,所以可以為 Windows 把所有大字號文本的 CSS改成「最強控制」的那個方案。
    注意:把冬青黑體簡體中文(Hiragino Sans GB)放在這么前面會在某些情況下出問題,詳見第四部分。

不要輕易在 font-family 屬性里寫上中易宋體(SimSun)。因為如果你寫了它,為了避免安裝了 Office 的 OS X 調(diào)用它來顯示,你就得把冬青黑體簡體中文和華文黑體都列在它前面。而把中易宋體(SimSun)和華文黑體這樣的系統(tǒng)默認字體寫出來實在是沒有必要。 
不要輕易把中文網(wǎng)頁的 font-family 寫成以「serif」結(jié)尾,因為如果列出的字體都沒有,系統(tǒng)會按照「serif」的指示去用歸于 serif 的中文字體——比如 OS X 會用華文宋體,太細了,效果實在不好。 

基于上面提到的這兩個方案,還有各種中間形態(tài)可以選擇。而 @崔凱 提到了另一個常見方案:font-family: … sans-serif; ——即完全由各平臺自己決定使用什么中文字體。這是很常見的方案,其實也是最成熟的方案,豆瓣、知乎等網(wǎng)站都是如此。但因為這個方案和這個問答的初衷不符,所以我沒有把它列入討論范疇。 

四、另外: 

@厲向晨 提出了一個重大問題:如果把冬青黑體簡體中文用作 font-family 的第一個中文字體,對于安裝了冬青黑體簡體中文的 Windows 用戶來說,因為 Windows 對 PostScript 輪廓的字體渲染得很糟糕,效果會幾乎沒法閱讀;而如果把微軟雅黑放在冬青黑體簡體中文前面,微軟雅黑在 OS X 里的渲染效果起碼可以接受。

目前 Windows 里的情況比較亂,IE9+ 可以識別系統(tǒng)里安裝的冬青黑體簡體中文,而較新版本的 Firefox(@顧軼靈 說是 4+)能部分識別(似乎會分不清字重),其他瀏覽器/內(nèi)核不行(必須用 PostScript name 才能識別)。所以,對于正文,最好針對不同的平臺分別指定 font-family;對于大字號標題(尤其粗體)倒不必擔心。

其實,如果你的網(wǎng)站可以判斷 UA 來針對各平臺提供不同的 CSS,那么以上的排序問題就沒那么復(fù)雜了。根據(jù)以上分析,為各個平臺指定你想要的字體就好。

應(yīng)當注意的 WebKit 怪癖:如果你將西文字體設(shè)置為 Georgia 之類的 serif 字體(即,與列表后面的 sans-serif 中文字體不屬一類),且 WebKit 內(nèi)核的 UA(Mac OS X 的 Safari 是個典型)找不到你指定的任何中文字體,可能會導(dǎo)致 UA 用系統(tǒng)默認的 serif 中文字體。比如,如果 Mac OS X 的 Safari 遇到了「font-family: Georgia, , sans-serif;」,就會用華文宋體顯示中文。所以某些情況下你可能有必要加上「STHeiti」。

原文地址:http://www.zhihu.com/question/19911793

關(guān)鍵詞:網(wǎng)頁字體