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; }

垂直的旋律