排版者應(yīng)像手藝人一樣遵循一條原則：做好自己的工作并隱于無形.
關(guān)于
網(wǎng)頁上百分之九十五的信息是「文字」，大多數(shù)人瀏覽網(wǎng)頁的狀態(tài)就是閱讀，也就是你目前正在做的事情. 因此作為一名前端工程師，讓文字更好地在網(wǎng)頁顯示，是一件極其重要的工作.
字體排印有兩種形式，一種稱為 Creative Typography，另一種稱為 Technical Typography. 前者傾向于設(shè)計，比如選擇的字體表達的情緒，字間距的設(shè)定帶來的視覺影響. 而后者更傾向于技術(shù)，以一套有跡可循的規(guī)則進行應(yīng)用，比如實現(xiàn)「齊頭尾」如何避免中西文混排造成的字間距拉伸，以及選擇什么樣的 font-family可以在多平臺上最優(yōu)顯示等等.
本文主要圍繞 Technical Typography 進行討論.
選擇字體
在 Web 上應(yīng)用字體，是一門技術(shù)，同時也是一門藝術(shù). 由于計算機歷史發(fā)展的原因，西文有大量優(yōu)秀的字體可供選擇，可對于中文來說就是一項挑戰(zhàn). 主流操作系統(tǒng)提供的本地中文字體極少，另一方面中文字體組成的特殊性，其體積過于龐大，無法良好地使用 webfont. 所以編寫健壯的 font-family 是一件需要深思熟慮的事情.
以下列出各種平臺下合適的中西文字體：
拋開宋/明體長時間作為系統(tǒng)默認字體，所產(chǎn)生的審美疲勞，宋/明體相比黑體是更合適作為內(nèi)文字體. 大多的宋/明體針對內(nèi)文設(shè)計，橫細直粗，造型方正，筆畫在小字號的情況下，不會糊在一起，給人一種素雅的感覺. 而黑體筆畫粗壯有力，引人注目，更適合作為標題使用.
但大部分人已經(jīng)習慣在網(wǎng)頁上閱讀黑體，以及宋/明體在字重過大的情況下，顯示效果還是不太理想. 所以內(nèi)文默認提供黑體，可選擇性的切換宋/明體.
按照以上表格提供的中文字體，為此我為內(nèi)文和標題編寫兩套 font-family. 關(guān)于這兩套 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; }
垂直的旋律
音階
Robert Bringhurst 在《The Elements of Typographic Style》談到字號大小之間的比例，形似于音樂中的音階. 作曲時以某個特定的音階為基礎(chǔ)，才會形成特定的風格. 字號的排版同樣如此，有規(guī)律的字號變化，才會形成特定的排版風格.
將內(nèi)文以 16px 作為字號
標題h1, h2, h3, h4, h5, h6以 16px 作為字號基礎(chǔ)，按同比例的遞減
p { font-size: 16px; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5, h6 { font-size: 1.2em; }
節(jié)拍
此外，Robert Bringhurst 還談到版式中的空間就像音樂中的時間(Space in typography is like time in music)，言下之意，把握間距（行高）就如把握節(jié)拍. 節(jié)拍是對時間的分割，倘若搶拍便失去節(jié)奏. 文字的間距（行高）亦是對空間的分割，不一致間距（行高）比例，便會失去「垂直的旋律」.
將內(nèi)文以 1.7em 作為行高
標題 h1, h2, h3, h4, h5, h6以 1.5em 作為行高.
p { line-height: 1.7em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.5em; }
段首縮進 VS 段落間距
段落分隔對于中文排版而言也是特別重要，主要以「段首縮進」和「段落間距」兩種方式表現(xiàn)，它們的唯一目的就是將段落分隔.
「段首縮進」主要用于印刷書籍，節(jié)省縱向空間，保持文本連貫，但一般在網(wǎng)頁上的閱讀速度較快，會使文字過于密集產(chǎn)生壓力. 相反「段落間距」主要用于網(wǎng)頁，充分利用網(wǎng)頁無限的縱向空間，保障文本塊的整潔，同時給予長篇閱讀休息的間隙. 所以一般網(wǎng)頁排版，會考慮選擇「段落間距」，可以設(shè)置以下屬性實現(xiàn)「段落間距」.
p { margin-bottom: 1.7em; }
h1, h2, h3, h4, h5, h6 {
margin-top: .7em;
margin-bottom: 0.2em;
}
對齊
漢字的方塊性質(zhì)構(gòu)成了漢字獨有的藝術(shù)美感，使其具有工整的特點，從而顯現(xiàn)出中文排版的重要原則：所有元素都是正方體. 但從二十世紀開始使用標點后，以及中西文混排的情況越來越多，為了保證「禁則處理」和「齊頭尾」實現(xiàn)，可能需要在不同條件下進行適當?shù)臄嘣~處理.
「禁則」是來自日語的排版術(shù)語，主要指的就是禁止一些標點等字符出現(xiàn)在行首或行尾的規(guī)則，大致相當于漢語常說的「避頭尾」.
可以設(shè)置以下屬性實現(xiàn)「齊頭尾」，其中inter-ideographic意思是「通過調(diào)整單詞和字符之間的留白來實現(xiàn)兩端對齊」.
p {
text-align: justify;
text-justify: inter-ideographic;
}
但這樣的「齊頭尾」并不是完美的，主要由于技術(shù)遺留原因，在 Windows 和 Linux 上的 webkit 瀏覽器并沒有實現(xiàn) inter-ideographic 導(dǎo)致中西文混排的時候，容易出現(xiàn)過度拉伸字間距的情況.
為此有一種不優(yōu)雅的解決方案，在極易出現(xiàn)字間距拉伸的小尺寸屏幕（手機）上使用「斷詞處理」，避免字間距拉伸，可是這樣也帶來「無視避頭尾規(guī)則」和「西文單詞斷詞」的壞毛病. 這是用一種不優(yōu)雅解決另一種不優(yōu)雅，按需抉擇吧.
可以設(shè)置以下屬性進行「斷詞處理」.
p { word-break: break-all; }
更多詳情，可以移步到我個人主頁上的原文：
網(wǎng)頁字體排印指南
