我设计自己博客的原则

博客，是一种内容中心的网站。确切地说，是文字内容中心的网站。一个博客主题被创造出来，目的就是提升读者的阅读体验。靠什么提升呢？文字排版和 UI / UX 设计。基于此，可以提出以下原则：

1. 博客应当照顾不同终端的体验。
2. 在不与第 1 条冲突的情况下，博客的字体和排版应当清晰、易于阅读、重点突出，用户交互直截了当，以让用户尽可能快地获取自己想要的内容。
3. 在不与第 1、2 条冲突的情况下，博客的加载速度应该尽可能快。

不同终端——包括读屏器

一些博客主题大量使用了 <div> 元素，这是不对的。HTML 是一个标记语言，它应当具有足够的语义性，以便让机器和人都能理解。而 <div> 元素，是一个没有任何语义的元素。它的作用就是为了方便 CSS 设计样式。但是，如果博客主题大量使用了 <div> 元素，这个博客对读屏器来说就会是一团乱麻。

读屏器是一种辅助工具，它可以读出网页上的文字，从而帮助盲人或者视力不佳的人。一个博客主题如果在所有地方都使用 <div>，而不是 <header>、<article>、<main>、<h(1-6)> 这些语义化 tag 的话，那么读屏器就无法正确地读出博客内容。这是不对的——博客系统应当照顾到所有的读者，而不仅仅是视力正常的读者。

如果你使用 markdown 编写博客，语义化的问题会有一个缓解：markdown 的各个元素最后会被编译成 html 的各个语义化的标签。比如，# 会变成 <h1>，## 会变成 <h2>，* 会变成 <em>，** 会变成 <strong> 等等。不过，至少还要用 <article> 标签把它们包起来。

如果说对读屏器的适配是单纯的利人行为，那么从利己的角度出发，语义化还有另一个好处，就是方便 web 爬虫爬取信息。博客的流量入口往往是搜索引擎，而搜索引擎的爬虫是通过 html 标签来分析网页的。如果博客主题没有语义化，那么搜索引擎就无法正确地分析博客内容，从而这个博客在搜索引擎上的权重就会下降。

字体——衬线还是无衬线？微软雅黑一无是处吗？

有些博客主喜欢衬线字体（如宋体）而非无衬线字体（如黑体，包括微软雅黑）。有些博客主尽管使用了黑体，却视微软雅黑如寇仇，想方设法避免它显示在即使是 Windows 设备的屏幕上。这都是不正确的。

屏幕刚出现时，上面的字体是像素点阵字，而当计算机性能提高到可以显示各种字体时，出于历史惯性，人们几乎是立即把来自印刷时代的衬线体搬了上去。然而在这之后，无衬线体出现，并迅速抢占了衬线体的位置。历史证明，衬线字体是印刷时代的字体，而黑体是屏显时代的字体。

在黑体里，微软雅黑的字形确实是不那么好看的一个。它不是动态字体，提供的字重也不多，但有一个优势是别的字体无法取代的：与 Windows 的字体系统相搭配的微调。

字体并不是一切。决定文字显示效果的因素，除了字体以外还有渲染系统，而微软雅黑就是与 Windows 的渲染系统相搭配的。曾经我热衷于把 Windows XP 装饰成 Windows 7，但当我把 Windows 7 的微软雅黑字体放到 Windows XP 上时，我发现它的效果并不好：笔画不清晰，文字发虚，阅读起来很累。究其原因，就是渲染系统的问题。Windows Vista 及以上系统在显示微软雅黑字体时会进行微调，调整字体不同部分的笔画粗细乃至笔画的位置，以让字体显示得尽可能清晰，这个效应在像素密度越低的屏幕上越明显。

不同屏幕的像素密度是不一样的。像素密度的衡量单位是 DPI（dots per inch），或 PPI（pixels per inch），每英寸长度的像素数。DPI 越高，像素越密集。不同屏幕的 DPI 各不相同，但我们可以拿 Windows 的逻辑 DPI 作为参考：Windows 的默认 DPI 是 96，在高分屏普及后，Windows 提供缩放功能，在 125% 缩放时，Windows 的 DPI 能达到 120，150% 缩放时则是 144。DPI 越低，一个字所占用的像素就越少，从而就越考验字体和显示系统的微调能力。

而当我们把网页的字体指定为其它字体时，微软雅黑-Windows 字体渲染器的这一组合就被打破了。造成的结果是，在低分屏上，当文字比较小时，字体的笔画不再能被清晰地显示出来，就像下面这张图一样：

字体为思源宋体可变字重版，操作系统为 Windows 11，DPI 为 120，字体大小为 14px。可以看到，即使是在 120DPI 的屏幕上，这些字的很多横画都仍然很不清晰。

也许在 DPI 高达三四百的手机上，这些都不是问题。但是，既然“照顾不同终端的体验”是我设计博客的第一原则，低分屏上的体验就不能被忽视。

特效——好看。但别忘了博客是什么

一些博客主题提供了非常炫酷的特效和动画，如果使用得当，它们将能提升用户体验——比如一个伪进度条就能改善用户的等待体验。但当特效喧宾夺主时就是另一回事了。比如，这是我在我博客引入一个鼠标特效后的结果：

可以说，这个特效摧毁了我的博客。

（持续更新）