Amaze UI 之 CSS 中的文字排版

許多設計師喜歡用英文，是因為中文排版不好弄。使用英文時高大上的設計稿，替換成中文以后，經(jīng)常會大打折扣，這是由于中文字符多、不同字符的筆畫差異大引起的。

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

1.字體

Amaze UI 主要使用非襯線字體（sans-serif），在 <code>、<pre> 等元素上則設置了等寬字體（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 開始使用）；
  
• Helvetica Neue 是 iOS7 及 OSX 10.10 UI 字體（在部分文字垂直居中的場景有一些小問題，暫時先使用 Lucida Grande）；
  
• 有些 Windows 用戶安裝了麗黑字體，麗黑字體在 Windows 上渲染出來很模糊，所以把微軟雅黑放在蘋果麗黑之前；
  
• FreeSans - 包括 Ubuntu 之類的 Linux 分發(fā)版包含的字體。
  

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

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

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

嚴格來說，楷體屬于手寫體系列（cursive），不過英文的手寫字過于花哨，所以在 .am-kai 中英文使用 serif。關于五種字體的定義，可以查看 W3C 文檔。

1.3 Webkit 反鋸齒

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

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

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

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

參考鏈接：

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

1.4 字體相關鏈接

主流系統(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 設計文檔
  
• Supported UI Fonts in Windows Phone
  
• Typography | Android Developers
  

中文排版相關開源項目

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