Amaze UI 之 CSS 中的文字排版

許多設(shè)計(jì)師喜歡用英文，是因?yàn)橹形呐虐娌缓门Ｊ褂糜⑽臅r(shí)高大上的設(shè)計(jì)稿，替換成中文以后，經(jīng)常會(huì)大打折扣，這是由于中文字符多、不同字符的筆畫(huà)差異大引起的。

因此 Amaze UI 設(shè)計(jì)了更適合中文的排版設(shè)置，在網(wǎng)頁(yè)設(shè)計(jì)中，針對(duì)中文排版的研究很少，沒(méi)有太多現(xiàn)成的結(jié)論供參考。Amaze UI 也只能根據(jù)一些經(jīng)驗(yàn)，在字體設(shè)置、字號(hào)上做一些適當(dāng)?shù)母淖儭?br>

1.字體

Amaze UI 主要使用非襯線字體（sans-serif），在 <code>、<pre> 等元素上則設(shè)置了等寬字體（monospace）。

1.1 字體定義

body {
  font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
}

• Segoe UI - Windows UI 字體（從 Windows Vista 開(kāi)始使用）；
  
• Helvetica Neue 是 iOS7 及 OSX 10.10 UI 字體（在部分文字垂直居中的場(chǎng)景有一些小問(wèn)題，暫時(shí)先使用 Lucida Grande）；
  
• 有些 Windows 用戶安裝了麗黑字體，麗黑字體在 Windows 上渲染出來(lái)很模糊，所以把微軟雅黑放在蘋(píng)果麗黑之前；
  
• FreeSans - 包括 Ubuntu 之類的 Linux 分發(fā)版包含的字體。
  

1.2 字體輔助 Class
在 Amaze UI 的實(shí)踐中，font-family 設(shè)置只在 Base 樣式中出現(xiàn)了一兩次。在具體項(xiàng)目中，我們也不建議到處設(shè)置 font-family，雖然 Amaze UI 提供了設(shè)置字體的輔助 class。

• .am-sans-serif 非襯線字體，Amaze UI 主要使用的。
  
• .am-serif 襯線字體，中文顯示宋體，Amaze UI 中未使用。
  
• .am-kai 數(shù)字英文顯示襯線字體，中文顯示楷體。和 .am-serif 的區(qū)別僅在于中文字體，Amaze UI 中把 <blockquote> 的字體設(shè)置成了 .am-kai。
  
• .am-monospace 等寬字體，Amaze UI 源代碼中使用。
  

下面為幾種字體系列的演示：

嚴(yán)格來(lái)說(shuō)，楷體屬于手寫(xiě)體系列（cursive），不過(guò)英文的手寫(xiě)字過(guò)于花哨，所以在 .am-kai 中英文使用 serif。關(guān)于五種字體的定義，可以查看 W3C 文檔。

1.3 Webkit 反鋸齒

另外，在 Webkit 瀏覽器下還設(shè)置了反鋸齒平滑渲染，渲染出來(lái)要纖細(xì)一些，其他內(nèi)核的瀏覽器上看著稍粗一些。
2014.10.10 update: OSX 平臺(tái)的 Firefox 從 v25 增加了 -moz-osx-font-smoothing，實(shí)現(xiàn)類似 Webkit 的字體渲染效果。

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

如果你不喜歡，可以重置成瀏覽器的默認(rèn)平滑字體。

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

參考鏈接：

• -webkit-font-smoothing
  
• Better font-rendering on OSX
  

1.4 字體相關(guān)鏈接

主流系統(tǒng)中附帶的字體

• List of Microsoft Windows fonts
  
• List of typefaces included with OS X
  
• Common fonts to all versions of Windows & Mac equivalents
  
• OS X：Mavericks 附帶的字體
  
• OS X：Mountain Lion 附帶的字體
  
• iOS 7：字體列表
  
• iOS 6：字體列表
  
• Windows UI 設(shè)計(jì)文檔
  
• Supported UI Fonts in Windows Phone
  
• Typography | Android Developers
  

中文排版相關(guān)開(kāi)源項(xiàng)目

• 「漢字標(biāo)準(zhǔn)格式」——印刷品般的漢字網(wǎng)頁(yè)排版框架
  
• Entry.css - 可配置的、更適合閱讀的中文文章樣式庫(kù)