排版者應像手藝人一樣遵循一條原則：做好自己的工作并隱于無形.
關于
網(wǎng)頁上百分之九十五的信息是「文字」杆麸，大多數(shù)人瀏覽網(wǎng)頁的狀態(tài)就是閱讀褒脯，也就是你目前正在做的事情. 因此作為一名前端工程師，讓文字更好地在網(wǎng)頁顯示画机，是一件極其重要的工作.
字體排印有兩種形式摊沉，一種稱為 Creative Typography，另一種稱為 Technical Typography. 前者傾向于設計哲嘲，比如選擇的字體表達的情緒，字間距的設定帶來的視覺影響. 而后者更傾向于技術外邓，以一套有跡可循的規(guī)則進行應用撤蚊，比如實現(xiàn)「齊頭尾」如何避免中西文混排造成的字間距拉伸古掏，以及選擇什么樣的 font-family可以在多平臺上最優(yōu)顯示等等.
本文主要圍繞 Technical Typography 進行討論.
選擇字體
在 Web 上應用字體损话，是一門技術，同時也是一門藝術. 由于計算機歷史發(fā)展的原因槽唾，西文有大量優(yōu)秀的字體可供選擇丧枪，可對于中文來說就是一項挑戰(zhàn). 主流操作系統(tǒng)提供的本地中文字體極少，另一方面中文字體組成的特殊性庞萍，其體積過于龐大拧烦，無法良好地使用 webfont. 所以編寫健壯的 font-family 是一件需要深思熟慮的事情.
以下列出各種平臺下合適的中西文字體：
拋開宋/明體長時間作為系統(tǒng)默認字體，所產(chǎn)生的審美疲勞钝计，宋/明體相比黑體是更合適作為內文字體. 大多的宋/明體針對內文設計恋博，橫細直粗齐佳，造型方正，筆畫在小字號的情況下债沮，不會糊在一起炼吴，給人一種素雅的感覺. 而黑體筆畫粗壯有力，引人注目疫衩，更適合作為標題使用.
但大部分人已經(jīng)習慣在網(wǎng)頁上閱讀黑體硅蹦，以及宋/明體在字重過大的情況下，顯示效果還是不太理想. 所以內文默認提供黑體闷煤，可選擇性的切換宋/明體.
按照以上表格提供的中文字體童芹，為此我為內文和標題編寫兩套 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; }
垂直的旋律
音階
Robert Bringhurst 在《The Elements of Typographic Style》談到字號大小之間的比例假褪，形似于音樂中的音階. 作曲時以某個特定的音階為基礎，才會形成特定的風格. 字號的排版同樣如此皆愉，有規(guī)律的字號變化嗜价，才會形成特定的排版風格.
將內文以 16px 作為字號
標題h1, h2, h3, h4, h5, h6以 16px 作為字號基礎，按同比例的遞減
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é)奏. 文字的間距（行高）亦是對空間的分割瑟由，不一致間距（行高）比例搓幌，便會失去「垂直的旋律」.
將內文以 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)頁排版姨蟋，會考慮選擇「段落間距」屉凯，可以設置以下屬性實現(xiàn)「段落間距」.
p { margin-bottom: 1.7em; }
h1, h2, h3, h4, h5, h6 {
margin-top: .7em;
margin-bottom: 0.2em;
}
對齊
漢字的方塊性質構成了漢字獨有的藝術美感，使其具有工整的特點眼溶，從而顯現(xiàn)出中文排版的重要原則：所有元素都是正方體. 但從二十世紀開始使用標點后悠砚，以及中西文混排的情況越來越多，為了保證「禁則處理」和「齊頭尾」實現(xiàn)堂飞，可能需要在不同條件下進行適當?shù)臄嘣~處理.
「禁則」是來自日語的排版術語灌旧，主要指的就是禁止一些標點等字符出現(xiàn)在行首或行尾的規(guī)則绑咱，大致相當于漢語常說的「避頭尾」.
可以設置以下屬性實現(xiàn)「齊頭尾」，其中inter-ideographic意思是「通過調整單詞和字符之間的留白來實現(xiàn)兩端對齊」.
p {
text-align: justify;
text-justify: inter-ideographic;
}
但這樣的「齊頭尾」并不是完美的枢泰，主要由于技術遺留原因羡玛，在 Windows 和 Linux 上的 webkit 瀏覽器并沒有實現(xiàn) inter-ideographic 導致中西文混排的時候，容易出現(xiàn)過度拉伸字間距的情況.
為此有一種不優(yōu)雅的解決方案稼稿，在極易出現(xiàn)字間距拉伸的小尺寸屏幕（手機）上使用「斷詞處理」，避免字間距拉伸讳窟，可是這樣也帶來「無視避頭尾規(guī)則」和「西文單詞斷詞」的壞毛病. 這是用一種不優(yōu)雅解決另一種不優(yōu)雅让歼，按需抉擇吧.
可以設置以下屬性進行「斷詞處理」.
p { word-break: break-all; }
更多詳情，可以移步到我個人主頁上的原文：
網(wǎng)頁字體排印指南
