维基百科对我们的重要性不言而喻,无论是在生活中还是学习中,如果要获取对某一话题的初步认识,维基百科一般都是那个最便捷且相对可靠的信息来源。可惜的是,或许是因为太过关注内容本身,维基百科的页面设计是非常简陋的,单调、拥挤的排版很难让人舒适阅读并迅速找到所需信息。

维基百科简约(陋)的默认风格
维基百科简约(陋)的默认风格

常见的改善维基百科显示效果的方法有两种:一是利用各浏览器自带的阅读模式,二是安装浏览器插件。但是,前者自定义灵活性较小,且依赖于浏览器的支持,主流的 Chrome 浏览器就没有内置阅读器功能;后者可定制性强,但加载插件需要消耗额外的资源。另外,两种方法的共同弊端在于不具有跨平台性:配置好的阅读环境无法在不同电脑上同步,对于移动端也缺乏良好的支持。

其实,作为一个自带 geek 属性的服务,维基百科本身已经提供了强大的外观定制功能。利用这一功能,经过一番简单的设置,就能达到下图中这样更美观、易读的效果。

优化后的维基百科显示效果
优化后的维基百科显示效果

注意:维基百科的各项设置需要登录才能访问。注册过程非常简单,在此不赘。

基础设置:改变皮肤、字号和对齐方式

登录后,点击页面右上角的 Preferences/参数设置 链接打开设置,然后切换到 Appearance/显示 选项卡。可以看到,维基百科共提供了五种皮肤供用户选择。然而,它们中的绝大多数都只会让本就简陋的页面变得更加复古……

听起来很芬芳的「科隆香水蓝」主题……祝你拥有愉快的一天
听起来很芬芳的「科隆香水蓝」主题……祝你拥有愉快的一天

唯一比较符合当下设计审美的,大概只有 MinervaNeue 这款皮肤,它实际上就是维基百科移动版页面的桌面端移植。选中该选项,然后点击页面底部的 Save/保存 即可应用该皮肤,其效果如下:

MinervaNeue 皮肤的效果
MinervaNeue 皮肤的效果

可以看出,界面的整洁度和可读性已经比之前高了不少。不过,这样的效果仍然不能让人完全满意。例如,字号还是过小,在电脑屏幕上看起来较为吃力;没有两端对齐,文本块的右侧边缘看起来不够整齐等。要进一步完善效果,就要用到自定义 CSS 的功能了。

再次进入设置页面,点击 MinervaNeue 主题右侧的 Custom CSS/自定义 CSS 链接。由于我们是第一次修改该主题的样式,将会直接跳转到创建页面。

CSS 编辑界面
CSS 编辑界面

在代码框中输入下列内容:

.mw-body {
    font-size: 1.25em !important;
    text-align: justify;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

这段代码的作用是将正文部分的字号修改为 1.25 em(可以反复尝试出最适合自己的值;维基百科默认值是 0.85 em,小得丧心病狂),并开启两端对齐和英文连字符。

输入完成后,点击页面底部的 Save page/发布页面 按钮。这时,再刷新维基百科的页面,就可以看到修改后的效果了。

修改了字号和对齐属性后的效果
修改了字号和对齐属性后的效果

优化正文字体

在如上优化的基础上,可以进一步改进的是正文字体的显示效果。默认配置下,维基百科只要求浏览器调用 Serif (无衬线)字体,而没有指定具体的字体名称。实践中,这种将决定权完全交给系统的做法往往效果不尽如人意,而且在不同配置环境下的表现很不统一。

为此,我们在上述代码中加上一行:

font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;

这样,无论在什么操作系统中打开,都能看到正文显示为较高质量的黑体

另外,相比于黑体/无衬线体,宋体/衬线体通常被认为更适合长文阅读,不易引起疲劳感。如果想让维基百科内容显示为宋体,可以将上述代码改为:

font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;

效果如下:

将正文修改为衬线字体的效果
将正文修改为衬线字体的效果

(上面的字体回退顺序参考了此 GitHub 项目,在此感谢。)

当然,你也可以改为自己喜欢的字体,如思源宋体

font-family: Source Serif Pro, Source Han Serif, serif;

注意:

  1. 维基百科不同语言版本虽然账号是互通的,但偏好设置和自定义 CSS 却相互独立。因此,你需要为自己常用的每种语言版本(如中文和英文)重复一次上述设置。
  2. iPad 上的 Safari 浏览器默认访问的是移动版页面;如果想在 iPad 上看到同样的效果,需要在词条底部切换为桌面版。(如果想在 iPad 上使用自定义字体,可以参考少数派之前发表的这篇文章。)

进阶操作:「移花接木」借用 Stylish 效果

当然,上面步骤所实现的效果是比较基础的,CSS 的潜力远不止这些。前面提到的页面美化插件 Stylish,其原理就是额外加载一段自定义的 CSS 代码,以达到修改页面外观的效果。因此,既然维基百科本身支持自定义 CSS,我们完全可以「移花接木」,借用他人已经写好的样式文件,达到不借助插件实现复杂效果的目的。

为此,我们先安装 Stylish 插件,然后在 UserStyles 网站(Stylish 插件的样式库)上搜索 Wikipedia,从中挑选一个符合自己口味的,例如这个采用仿 Material 设计的主题,点击 Install Style 安装。

在 UserStyles 上找到合适的主题并安装
在 UserStyles 上找到合适的主题并安装

然后,在 Stylish 插件的设置页面,切换到 Manage 选项卡,找到我们刚才安装的主题,点击 Edit 进入编辑模式。

这时,我们就能看到该主题所采用的 CSS 代码了。需要注意的是,大多数主题的 CSS 代码都不止一段,每段根据不同规则适用于不同的页面,这可以从其下方的 Applies to 选项中看出。就维基百科的主题而言,只有那些适用于 wikipedia.org 全站的 CSS 片段才是用来调整词条页面的外观的;我们只需要这些片段。

找到所需的 CSS 代码
找到所需的 CSS 代码

将上述片段复制出来后,对维基百科关闭 Stylish 插件,并切换回默认的 Vector 主题,点击其右侧的 Custom CSS/自定义 CSS 链接。

将找到的 CSS 代码按照前述方法依次复制进代码框并保存,刷新页面,就能看到换上新装的词条页面了。

最终效果
最终效果

你可以在此获取该主题的 CSS 代码。