系列讲座《网页字体初探》第三期：
中文网页字体实作与挑战
设计师、品牌营销人、产品经理、开发者必知的网页字体知识。第三期转向中文：CJK 网页字体的现状、中西混排的定制与回落、网格与行距，以及换行、间距、标点这些更细的版式问题。
第三期把前两期的机制收束到中文这一件事上：先用哪几款字、西文怎么配、行长行距怎么定，再往下是标点与换行这些更细的版式。
中文网页的现状
中文有四大印刷字体：宋体、黑体、仿宋和楷体。而现在的网页排版很少看到仿宋与楷体，原因在于我们以往的网络基础设施是从国外引进的，衬线体与无衬线体刚好能对应到宋体与黑体，两套就够用了。
对应西文的衬线与无衬线分类，网页上最常被指定的两款基础字体。
规范、屏显都成熟，中西文配对也最容易找到参照。
书写感更强，在网页上几乎不出现。
要用的话，多半得靠自托管网页字体把字形带过去。
我们在 CSS 里调用字体时常用 generic-family。字体规范正在推进第四级，还不算稳定，但在加入更多功能来满足需求，后续仍需大量测试。
从有需求，到经过检验，到最终应用，是一条漫长的路。所以更实际的做法是：先看清现在能做什么，再在此基础上谈未来。
中西混排：定制与回落
最好能定制：安心、放心
蒙纳字体创意总监小林章先生创作的翔鹤黑体，就是在 Neue Frutiger 的风格与字形基础上演绎出来的。这种成对定制的字体最适合中西文混排，拿来就能放心用。
落实回落机制
没有专门定制的中西文搭配，就要面对两个难题：一是中西文怎么配才合适，需要反复权衡；二是网页字体会随用户的环境与设备变化，开发者很难预测别人看到的画面。下面几种方法可以控制回落：
- 西文优先。写 font-family 时尽量把西文写在前面，因为不少老的中文字体包里搭配的西文效果并不理想。
- 系统字体优先于特定字体。特定字体拿不到时，先落到系统自带字体，别一路掉到最底下。
- Mac 优先于 Win。桌面端的 Mac 用户往往更希望看到特定字体，可以优先写 Mac 系统字体。
- 注意向后兼容。一定要有通用字体家族兜底，避免字体最终显示不出来。
特别注意中西共用标点
标点对中文易读性的影响非常关键。既然西文优先，一些中西文共用的标点就可能把中文版面带偏，需要微调甚至定制。例如苹果官网的中文标点全部做成半宽；共用码位的标点，要格外留意搭配。
从单位到网格
网格概念
西文没有「格」的概念，字母是比例宽度；中文是有「格」的，理论上行长就应当是字号的整数倍。中式网格里所有元素都以正文字号为基础推出来：行长、缩进、行高、标题，源头都是它。
单位选择
字号有绝对单位与相对单位，绝对的如 pt、mm，相对的如 px。更适合汉字的相对单位是 em 和 rem：以 em 为基础，段首空两格就可以直接写成 2em。
响应式设计
跨设备展示要考虑响应式。苹果网页的文字并非随窗口无极变化，而是分档变化，用这种方式把行长控制住。定好在特定尺寸下的关键宽度，排版就能理想得多；做响应式时抓住阶段性的宽度，视觉可控性会更高。
行距问题
中西文的行距不能沿用同一套。西文行距压到 0、密排也还能读，直接搬到中文就难读了。更换语言时要主动调行距，中文正文至少 1.5 倍行距。
所谓「高级排版特性」
中文排版还有一些常被称作「高级排版特性」的能力，用得好坏差别很明显。
换行控制
最好的结果是从语义换行，而不是让行宽硬折。按语义断行，句子读起来才有节奏，专有名词也不会被拆散。
中西间距
一段中文里夹着西文单词，空格怎么设是讨论了很多年的话题。关键在于：这个空格应当是样式，而不是作者硬敲进去的内容。现在已经有一些浏览器能自动补空格，并略过已经手工加上的那一个。
标点宽度调整
行头行尾有标准宽度，行内的「连续标点」还要另外压。两头都照顾到，版面才不会松松散散。
我能做什么？
中文网页字体能不能落地，靠的是四件反复做的事：
需求、资源、优先度，先想清楚再动手排。
设计师、工程师、用户，三方对同一版面的理解往往不一样。
靠谱的字体、靠谱的服务，比把一款字体用到极限更重要。
设备、平台、环境，各测一遍，回落链路尤其要验。
《网页字体初探》系列讲座
查看全部回放 →让中文网页字体真正落地
三期讲完，回到自己的项目：先定中西文搭配与回落策略，再抓行长、行距与标点。需要字体与服务，Monotype Fonts 可以一路接上。
{
"totalBlocks": 1,
"blocks": [
{
"component": "shared.rich-text",
"title": "完整回放｜《网页字体初探》系列讲座第三期：中文网页字体实作与挑战"
}
],
"spliced": {
"articleFooter": false
},
"useRecommendation": false,
"strapiRelatedCount": 0,
"relatedCount": 0,
"designersCount": 0,
"hasDesigners": false
}
