如何提高网页中文字的阅读体验，这是可以写一本书的问题，仅仅是粗略的搜索一番，也是众说纷纭。我倒认为这是一件很主观的事，即使是同样的排版设置，在不同的设备，不同的系统甚至不同的浏览器中表现都不一样，也可以说在网页设计中排版是极其自由的，关于如何提高用户阅读体验这件事，自然没有统一的标准。
对于自建网站来说，尤其是博客网站来说，完全取决于站长的爱好，最不济的情况下自己看着舒服就行。但我认为网页作为表达你想法的媒介，让看的人有一个过得去的阅读体验其实是件很重要的事。
这里推荐一下 B 站 UP 主 oooooohmygosh 的视频合集——有趣的设计，非常生动形象，特别是其中讲文字排版的几期视频，肯定会对你有所帮助。引用一段他在 几件小事，快速拯救你的排版 这期视频中的话：
也许你并不是一个平面设计师，也许你只是撰写一个博文，或者只是发布一条朋友圈。但你也应该或多或少从读者的体验来思考，优化你的排版毕竟你并不只是自己看，而是想要别人来读，你为此付出的这些努力，都是所谓设计的一部分。
具体该如何设置，我没有学过设计，也没深入的研究，所以并不能道出一二，只能狭隘的说说经过一些初步认识和学习后，我在自己博客字体选择与正文排版上的一些选择与取舍，谈不上抛砖引玉，只是主观感受。
* 以下内容默认讨论的是电脑网页端情形
字体选择
其实这几年也研究过很多次关于网站字体的选择，尝试了很多方案，但都不尽人意。同时这也是一个被很多博友反复研究过的事情了，这里分享两篇比较优秀的文章：
我就不再重复啰嗦各个字体的区别，哪个字体更好看之类的问题，毕竟各有千秋，你需要做的是调选出一些你喜欢的字体，并且在考虑到对网页加载速度造成的影响、多数读者的观感等因素之后，最终确定自己的网页字体该如何设置，这里直接谈谈我是如何选择的。
衬线字体与非衬线字体
这个其实没什么好说的，取决于个人喜好。我的感受是单单就字体来说，衬线字体是更加好看的，特别是中文衬线字体看起来相当地优雅。当考虑到各种情形，当阅读大量文本时，总的来看一个体验是：
- 电子屏上非衬线字体阅读会更加轻松，较小的字体也能清晰的辨别，对设备的显示要求也更低。
- 在纸质或者墨水屏上衬线字体阅读会更加舒适，甚至对于小说这一类书籍，衬线字体会让我更容易读下去。🧐
字体家族
分为西文字体和中文字体的选择。
先说说西文字体。在尝试 Inter 字体之前，我是坚定的 Open Sans 爱好者，也一直用了很多年，但在用过 Inter 之后就更换阵营了，Inter 适配性更广，整体也非常自然，唯一的缺点可能就是不少字体的通病，大写的 i (I) 和小写的 l (L) 不分 (Il)。
还有一个小问题是，Inter 字符集比较全，官方提供的字体文件比较大，单个字重的 woff2 文件大小在 100kb 左右，网上没找到只包含拉丁字符的精简版本，自然后想到使用 Google Fonts，Google Fonts 有国内节点（谷翔），大多数地区速度都很快，但不幸的是我以前碰到过几次抽风，加上国内环境的不确定性，所以考虑换一个方案。之后用了一段时间 360 奇舞团维护的开源项目免费 CDN 服务 75CDN，提供了 Google Fonts 的本地 CDN，速度很快，体验很棒，但 Inter 字体目前只有常规字重，略显可惜。
后来有一段时间是自己反代谷歌字体使用，但体验并不好，提前高优先级加载会阻塞网页加载，异步加载使用 font-display: swap 属性也会在加载后重新渲染网页字体造成明显的 CLS 问题。在我多次考虑要不要放弃使用 Inter 字体转而直接用系统自带的字体时，偶然发现了一个提供谷歌字体本地化服务的网站 google webfonts helper，可以非常方便的下载 Web Fonts，单个字重的 woff2 文件大小只有 25kb 左右，所以最后毫无疑问的选择了本地化引用 Inter 字体，通过使用 preload 预加载几乎不会对网页造成 CLS 影响。
再来谈中文字体。考虑到中文字体的体积，即使使用一些字体工具只提取需要的常用字符来进行精简，仍然不小，本地化几乎不考虑。其实中文如果用 Google Fonts 的话很不错，按需加载，但考虑到前面提到的因素，因此更倾向于从系统自带字体中选。
Mac OS 上几乎不用担心，默认的苹方效果相当不错。Linux 上不少发行版也内置了不错的中文字体，而且考虑到 Linux 用户大概率会自己装字体，问题也不大。到了 Windows 上就有些为难了，默认的微软雅黑只能说中规中矩，但也能用。所以有相当一段时间我的中文字体设置如下：
font-family: 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;
但我最近喜欢设置一些奇奇怪怪的子重，如 Medium, SemiBlod 这些，Windows 上中文字体多字重的缺失是一个问题，而且一旦配合上西文字体，即使同一个子重，中英文放在一起也会风格不统一。
经过漫长的探索与尝试，我放弃了治疗，最后决定将选择还给用户，直接使用用户的系统默认字体，所以我的最终设置如下：
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
字号
随着高分屏的普及，文字变得更加“高清”，但同时也变小了。
字号的选择首先要看单位，常用的单位有 px, em, rem, % 等，我更倾向于使用 px，更加稳定可控。目前 Chrome 以及绝大数多浏览器默认字体大小为 16px。但不知道大家有没有注意，现在很多国外网站的默认字体都设置得比较大，例如 Github Blog 为 18px，Medium 为 20px，而 Google Web Dev 是根据当前窗口大小动态设置的，font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); 当然西文和中文不能一概而论，也不是说字号小就不对，如果排版适当反而会有一种精致感，但我更倾向于稍微大一些，读起来会更加轻松。多数情况下当我打开一个正文字号是 14px 的网站或者论坛，可能不会停留太久，或者不得不增加网页缩放。
其实多年以前我就将本站的字体设置为了 18px，默认的 16px 如果在没有开启缩放的高分屏幕上就显得有点小了，不过影响也不大，我认为一般情况下正文字号设置为在 16px ~ 20px 是比较合理的区间，但最后还是取决于网站的内容和风格，只要整体协调，都是好的选择。下文中的示例默认为我设置的 18px 字体大小。
排版设置
一旦谈到页面排版就会比较复杂了，但对于博客文章来说并不会涉及到过多，只需要考虑一些简单的页面宽度、间距以及书写规范就行了。
正文宽度
正文宽一些确实会加大当前文段内容的信息量，但如果不加以控制，每次读到行尾进行行间跳转开始找下一行时就会不太轻松，在大屏幕特别是带鱼屏上甚至会频繁的转头提前治疗颈椎病，当然，一些专业性的文章自然不可避免。我认为在 1080P 分辨率下，对于普通文字内容来说一个舒适的阅读宽度在 700px 左右（也和字体大小有关），随着分辨率的增加可以适当增加正文宽度。
正文宽度换一个说法是行长，一般情况下建议一行的行长应为文字尺寸的整数倍，各行的位置尽可能头尾对齐。多数网站会使用两端对齐，确实看起来会更加舒适，但我的文章大多与 IT 相关，其中往往夹杂许多英文名词，两端对齐可能会是一个灾难，同时我反而觉得参差不齐会好看一些。
段距与行距
字间距一般情况下不用调整，字体在设计的时候设计师就已经进行了精细的调整，绝大多数情况下已经是最优的显示效果了，因此主要关注段距与行距。
行间距作为一个影响排版的重要因素，过大或过小都会导致阅读体验下降。西文的行间距一般是 1.2 倍左右，中文在 1.5 ~ 2 倍之间体验会比较好。以文字为主的网页中，个人习惯设置 line-hight 在 1.8 左右。
段距的话按网上推荐的说法是取一个空行的高度（行高 + 行间距）或者为行间距的 1.25 倍，我凭感觉设置在 25px ~ 30px 之间看起来比较舒服。
网页阅读不只有文字，常常还有多级标题，图片和代码块这些，它们的行距可以和文字一致或者稍微高一些用以突出，这个就看个人的设置了。
中英文混排
中英文混排是一个老生常谈的问题，但据我观察，不少博主并没有注意到这件事，Github 上有一个比较热门的中文文案排版指北，这里简单谈谈中英文混排要不要加空格的问题。
虽然里面在中西文之间添加空格只是一个折中的办法，但确实能在一定程度上提高阅读体验。不过也有部分朋友反对这种做法，在 v2ex 上也是个月经话题，有过多次讨论。显然，仅仅从这篇文章中也可以看出我是属于支持的那一派，因为实在不喜欢中英文挤在一坨。但也确实会在某些情况下出现排版问题，如下图中谷歌搜索页面会去掉前一个中英文之间的空格。
归根结底还是一个习惯问题，如果大多数人都认为加上阅读起来会比较舒服，那我觉得就应该加上，而不是纠结这件事应该是交给渲染器去做（例如 iOS 和 Microsoft Word 中会自动留空）的，自己该不该做。虽然不优雅，更不应该去推崇、要求别人也加上空格，本身不分对错，在当前的 Web 环境下实属无奈之举。
Responses