網頁字體排印指南

class="area">

排版者應像手藝人一樣遵循一條原則：做好自己的工作並隱於無形.

關於

網頁上百分之九十五的信息是「文字」，大多數人浏覽網頁的狀態就是閱讀，也就是你目前正在做的事情. 因此作為一名前端工程師，讓文字更好地在網頁顯示，是一件極其重要的工作.

字體排印有兩種形式，一種稱為 Creative Typography，另一種稱為 Technical Typography. 前者傾向於設計，比如選擇的字體表達的情緒，字間距的設定帶來的視覺影響. 而後者更傾向於技術，以一套有跡可循的規則進行應用，比如實現「齊頭尾」如何避免中西文混排造成的字間距拉伸，以及選擇什麼樣的 font-family可以在多平台上最優顯示等等.

本文主要圍繞 Technical Typography 進行討論.

選擇字體

在 Web 上應用字體，是一門技術，同時也是一門藝術. 由於計算機歷史發展的原因，西文有大量優秀的字體可供選擇，可對於中文來說就是一項挑戰. 主流操作系統提供的本地中文字體極少，另一方面中文字體組成的特殊性，其體積過於龐大，無法良好地使用 webfont. 所以編寫健壯的 font-family 是一件需要深思熟慮的事情.

以下列出各種平台下合適的中西文字體：

桌面端 Mac, Windows, Linux 上適合網頁顯示的優秀中文字體MACWINDOWSLINUX冬青黑體 
Hiragino Sans GB中易宋體 
SimSun文泉驿微米黑 
WenQuanYi Microhei黑體-簡（華文黑體）
Heiti SC (STHeiti)微軟雅黑 
Microsoft YaHei宋體-簡（華文宋體）
Songti SC (STSong)移動端 iOS, Android 上適合網頁顯示的優秀中文字體IOSANDROID黑體-簡（華文黑體）
Heiti SC (STHeiti)思源黑體 
Noto Sans CJK SCDroid Sans Fallback主流操作系統上適合網頁顯示的優秀西文字體無襯線襯線等寬Lucida GrandeGeorgiaMenloHelvetica NeueTimes New RomanCourierArial

拋開宋/明體長時間作為系統默認字體，所產生的審美疲勞，宋/明體相比黑體是更合適作為內文字體. 大多的宋/明體針對內文設計，橫細直粗，造型方正，筆畫在小字號的情況下，不會糊在一起，給人一種素雅的感覺. 而黑體筆畫粗壯有力，引人注目，更適合作為標題使用.

但大部分人已經習慣在網頁上閱讀黑體，以及宋/明體在字重過大的情況下，顯示效果還是不太理想. 所以內文默認提供黑體，可選擇性的切換宋/明體.

按照以上表格提供的中文字體，為此我為內文和標題編寫兩套 font-family. 關於這兩套 font-family 的選擇和排序，等空閒時，再寫一篇文章談下.

p { font-family: "Georgia", "Times New Roman", "Songti SC", "SimSun", serif; }h1, h2, h3, h4, h5, h6 { font-family: "Lucida Grande", "Helvetica Neue", "Arial", "Hiragino Sans GB", "Noto Sans CJK SC", "Heiti SC", "Microsoft YaHei", "WenQuanYi Microhei", sans-serif; }

垂直的旋律