如何提高网页中文字的阅读体验，这是可以写一本书的问题，仅仅是粗略的搜索一番，也是众说纷纭。我倒认为这是一件很主观的事，即使是同样的排版设置，在不同的设备，不同的系统甚至不同的浏览器中表现都不一样，也可以说在网页设计中排版是极其自由的，加上每个读者阅读喜好不同，关于如何提高用户阅读体验这件事，自然没有统一的标准。
对于自建网站，尤其是博客网站来说，如何排版完全取决于站长，最不济的情况下自己看着舒服就行。但我认为网页作为表达你想法的媒介，让看的人有一个过得去的阅读体验其实是件很重要的事。
这里推荐一下 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 左右，通过使用 preload 预加载几乎不会对网页造成 CLS 影响。
再来谈中文字体。考虑到中文字体的体积，即使使用一些字体工具只提取常用字符来进行精简，仍然不小，本地化几乎不考虑。其实中文如果用 Google Fonts 的话是不错的选择，按需加载，在有国内 CDN 的情况下体验很不错，不过我最后还是更倾向于从系统自带字体中选。
Mac OS 上几乎不用担心，默认的苹方效果相当不错。Linux 上不少发行版也内置了不错的中文字体，而且考虑到 Linux 用户大概率会自己装字体，问题也不大。到了 Windows 上就有些为难了，默认的微软雅黑只能说中规中矩，但也能用。所以有相当一段时间我的中文字体设置如下：
font-family: 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;
最近喜欢上了设置一些奇奇怪怪的子重，如 Medium, SemiBlod 等，Windows 上中文字体多字重的缺失对我来说是个不小的问题，而且一旦配合上西文字体，即使同样的字重放在一起也会粗细不均。
经过漫长的探索与尝试，我放弃了治疗，最后决定将选择还给用户，直接使用用户的系统默认字体，不过西文字体我还是再坚持一下 Inter。由此我的网页字体最终设置如下：
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
Updated 2024-02-19:
最近发现了一个关于是否使用 system-ui 的争议，简单来说就是在 Windows 中文系统（特别是旧版本）中，使用 system-ui 可能会出现非预期的显示效果，当然 system-ui 本身没有任何问题，只是某些情况下 Windows 系统的默认字体会比较抽象。如果你想确保在极端环境中网页字体也能呈现出你想表达的效果，可以考虑手动指定字体。
随着高分屏的普及，文字变得更加“高清”，同时也变小了。
字号的选择首先要看单位，常用的单位有 px, em, rem, % 等，我更倾向于使用 px，似乎略显老套，不过更加稳定可控。目前 Chrome 以及绝大数多浏览器默认字体大小为 16px。但不知道大家有没有注意，现在很多国外网站的默认字体都越来越大，例如 Github Blog 为 18px，Medium 为 20px，还有一些网站如 Google Web Dev 是根据当前窗口大小动态设置的，font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); 当然英文和中文不能一概而论，也不是说字号小就不对，如果排版适当反而会有一种精致感，但我更倾向于稍微大一些，读起来会更加轻松。
考虑到目前使用 24 寸 1080P（92 ppi）显示器的用户仍占主流，而 4K、5K 等高分屏用户也大概率会开启缩放，于是我将网页的字体设置为了 18px，但最后还是取决于你网站的内容和风格，只要整体协调，都是好的选择。
* 下文排版讨论默认为 18px 字体情况下
一旦谈到页面排版就会比较复杂了，但对于博客文章来说并不会涉及到过多，只需要考虑一些简单的页面宽度、间距以及书写规范即可。
正文宽度会直接影响当前文段内容的信息量，但如果不加以控制，每次读到行尾进行行间跳转开始找下一行时就会不太轻松，在大屏幕特别是带鱼屏上甚至会频繁的转头才行提前治疗颈椎病，当然，一些专业性的文章自然不可避免。我认为在 24 寸 1080P 分辨率下，对于普通文字内容来说一个舒适的阅读宽度在 640px ~ 800px 区间（也和字体大小有关），随着分辨率的增加可以适当增加正文宽度。
正文宽度换一个名字叫行长，一般情况下建议一行的行长为文字尺寸的整数倍，各行的位置尽可能头尾对齐。多数中文网站会使用两端对齐，确实看起来会更加舒适，不过我个人更加喜欢参差不齐的感觉，没有指定对齐方式，同时在中英文夹杂的情况下能避免很多问题。
字间距一般情况下不用调整，字体在设计的时候设计师就已经进行了精细的调整，绝大多数情况下已经是最优的显示效果了，因此主要关注段距与行距。
行间距作为一个影响排版的重要因素，过大或过小都会导致阅读体验下降。西文的行间距一般是 1.2 倍左右，中文在 1.5 ~ 2 倍之间体验会比较好。
段距的话按网上推荐的说法是取一个空行的高度（行高 + 行间距）或者为行间距的 1.25 倍。在以文字为主的网页中，如果参照我设置的 18px 字体，1.8 行间距，段距设置在 25px ~ 30px 之间是不错的选择。
网页阅读不只有文字，常常还有多级标题，图片和代码块这些，它们的行距可以和文字一致或者稍微高一些用以突出，这个就看个人的喜好了。
中英文混排是一个老生常谈的问题，不过据我观察，不少博主并没有特别在意这件事，Github 上有一个比较热门的中文文案排版指北，这里也简单谈谈中英文混排要不要加空格的问题。
虽然里面在中西文之间添加空格只是一个折中的办法，但确实能在一定程度上提高阅读体验。不过也有部分朋友反对这种做法，在 v2ex 上也是个月经话题。显然，从本文就可以看出我是属于支持的那一派，因为实在不喜欢中英文挤在一坨。但也确实会在某些情况下出现排版问题，如下图中谷歌搜索页面会去掉前一个中英文之间的空格。
客观来看，归根结底还是一个习惯问题，我是认为如果大多数人都认为加上阅读起来会比较舒服，那加上也无妨，而不是纠结这件事应该是交给渲染器去做（例如 iOS 和 Microsoft Word 中会自动留空）的，自己该不该做。虽然不优雅，也更不应该去推崇，不加上没毛病，加上也只是在当前的 Web 环境下的无奈之举。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。