← 全部文章

教程

调整字号和间距,让阅读更舒适

17 5月 2026 · 作者 JustZix Team

很多网站把细小的文字塞进齐边的栏目里。读它们很累。有了 JustZix,你可以附加一条调整文字大小、放开行距并限制栏宽的 CSS 规则——把任何文字墙变成令人放松的东西。

提高基础字号

浏览器从根字号计算每一个相对大小。提高那一个值,页面的大部分就会随之缩放。

html {
  font-size: 18px !important;
}

如果某个网站到处使用固定像素大小,根字号诀窍就够不着它。那就直接定位正文文字。

p, li, span, div, td, article, .content {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

给行留出呼吸空间

行高是唯一最大的舒适因素。大多数网站把它设得太紧。1.6 到 1.8 之间的值是正文的最佳区间。

body, p, li {
  line-height: 1.75 !important;
}
h1, h2, h3 {
  line-height: 1.3 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

限制栏宽

在宽屏显示器上横跨整屏的行扫描起来很累。理想的尺度大约是 65 到 75 个字符。约束主内容并把它居中。

article, .post, .content, main, .entry-content {
  max-width: 70ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

ch 单位以字符宽度来衡量宽度,所以栏目会适应你所用的任何字体。把这个与字体替换搭配,页面就会脱胎换骨。

放松字距和段落间距

段落之间一点额外间距,加上一丝字母间距,能让密集的文本感觉更平静。

p {
  margin-bottom: 1.1em !important;
  letter-spacing: 0.01em !important;
}
ul, ol {
  margin-bottom: 1.1em !important;
}
li {
  margin-bottom: 0.4em !important;
}

用 JavaScript 实现一个缩放滑块

想实时微调大小而不是编辑 CSS?一小段 JavaScript 规则可以为纯文本添加键盘缩放。

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;
  var html = document.documentElement;
  var size = parseFloat(getComputedStyle(html).fontSize);
  if (e.key === '=') html.style.fontSize = (size + 1) + 'px';
  if (e.key === '-') html.style.fontSize = (size - 1) + 'px';
});

按住 Alt 并敲加号或减号键来调整大小。JustZix 在你选定的页面上运行这段脚本,所以快捷键只在你想要的地方存在。

清单

• 从根字号开始;如果网站使用固定像素,就退回到直接选择器。
• 目标是行高 1.6–1.8,栏宽约 70ch。
• 不要过度间隔——字距太大对可读性的伤害和太小一样大。
• 与字体替换组合能带来最大的改善。

继续阅读我们关于替换网站字体的文章,浏览现成示例获取即用配方,或者下载 JustZix,今天就应用你的第一条阅读规则。