問題描述

如何在各種中文字體中選擇？襯線和非襯線如何抉擇？

問題解答

回答1：

前端中文字體，說起來都是淚，能夠逼死強(qiáng)迫癥設(shè)計師和強(qiáng)迫癥前端。

中文字體在各種字體渲染引擎下，個人經(jīng)驗如下表：

字體選擇 GDI Grayscale GDI Cleartype DirectWrite Quartz(iOS) Quartz(Mac) MacType serif 鋸齒 （中易宋體） 鋸齒 （中易宋體） 鋸齒 （中易宋體） 尚可 （華文細(xì)黑） 字重過小 （宋） 尚可(宋體) sans-serif 鋸齒 （中易宋體） 鋸齒 （中易宋體） 鋸齒 （中易宋體） 尚可 （華文細(xì)黑） 尚可 （華文細(xì)黑） 尚可(宋體) 中易宋體 鋸齒 鋸齒 鋸齒 默認(rèn)無 默認(rèn)無 尚可 中易黑體 鋸齒，變形 鋸齒 鋸齒 默認(rèn)無 默認(rèn)無 尚可 微軟雅黑 無法辨認(rèn) 尚可 尚可 尚可 尚可 字重過大 冬青黑 無法辨認(rèn) x-height失常 x-height失常 很好 很好 x-height失常 字重過大

現(xiàn)狀之下，還是需要綜合考量各個UA的用戶量和對應(yīng)的常見字體集。比如微軟雅黑在xp下沒法看，但主動去安裝微軟雅黑的部分用戶量還是非常少的，如果他們會這個，估計系統(tǒng)也會升級了。（為了照顧這部分用戶，人人網(wǎng)的做法是JS區(qū)分UA，然后覆寫font-family設(shè)置）至于用信黑體的用戶我覺得沒法考慮，三萬元的個人授權(quán)費(fèi)，這個門檻已經(jīng)讓持有信黑體的用戶足夠少，少到無法在前端兼顧了。

實用層面，我常用的font-family是這樣設(shè)置的，不太好看，但也不會太難看（已略去前方英文字體設(shè)置）：

'Microsoft YaHei', 'Hiragino Sans GB', sans-serif

原因可以詳細(xì)讀一下這個。

個人覺得最理想的屏顯字體是蘭亭細(xì)黑，在各個渲染引擎下都在能接受的范圍內(nèi)（除了MacType，MacType渲染出來的任何字體字重都偏大）。若中文字量少而且非用戶創(chuàng)造內(nèi)容，可以考慮webfont，用sfntly求子集后中文字體的大小就在可以接受的水平了，當(dāng)然，你得持有webfont版權(quán)才行。具體示例如小米4的某一版官網(wǎng)，他們的字體就用到了蘭亭超細(xì)黑（最后換掉了，估計是因為在GDI Grayscale下橫線會斷，沒辦法，太細(xì)了）。

想知道自己的UA是什么字體渲染引擎嗎？之前我做過一次整理：

我將會寫一篇《字體排印在前端》，敬請期待。

回答2：

在不存在一種跨平臺跨用戶的完美中文字體的前提下，不設(shè)置中文字體，讓系統(tǒng)、瀏覽器、用戶自己選擇，是最好的解決方案。

首先，無論系統(tǒng)默認(rèn)字體好壞與否，用戶每天都看的字體也出現(xiàn)在你的網(wǎng)站上，至少不會導(dǎo)致反感。而且，操作系統(tǒng)的默認(rèn)字體即便不好看，至少不會出現(xiàn)水土不服。

其次，相信不少在意字體呈現(xiàn)效果的用戶，都會調(diào)節(jié)系統(tǒng)默認(rèn)字體及其效果以求最佳，這時候放任系統(tǒng)自己選擇依舊是最佳。

然而，如果手動設(shè)置了字體：

首先，那一部分不在意默認(rèn)字體的用戶，不見得留意到字體變了，所以沒討好，也沒變差；

其次，對於在意字體的用戶，字體可能變好可能變差，而後者機(jī)率更大因爲(wèi)衆(zhòng)口難調(diào)。

綜上，前端手動設(shè)置中文字體基本就是費(fèi)力不討好的。

即便設(shè)置，也不該出現(xiàn)常見的默認(rèn)字體，如華文黑體、微軟雅黑、中易宋體，因爲(wèi)若這類字體生效，不是本來就會生效，就是在不該生效的地方生效，設(shè)置它們多此一舉。

回答3：

簡書 的字體覺得就可以，不過在 mac 下很多字體都蠻好看的