
如何提高网页中文字的阅读体验,这是可以写一本书的问题,仅仅是粗略的搜索一番,也是众说纷纭。我倒认为这是一件很主观的事,即使是同样的排版设置,在不同的设备,不同的系统甚至不同的浏览器中表现都不一样,也可以说在网页设计中排版是极其自由的,关于如何提高用户阅读体验这件事,自然没有统一的标准。
对于自建网站来说,尤其是博客网站来说,完全取决于站长的爱好,最不济的情况下自己看着舒服就行。但我认为网页作为表达你想法的媒介,让看的人有一个过得去的阅读体验其实是件很重要的事。
这里推荐一下 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 环境下实属无奈之举。