← 全部文章

教程

用 CSS 替换任何网站的字体

17 5月 2026 · 作者 JustZix Team

排版决定阅读体验的成败。如果某个网站强加一种纤细、低对比度的字体,你可以覆盖它。一条 JustZix CSS 规则就能把页面上的每一种字体换成你真正喜欢的那一种。

在各处强制使用系统字体

最简单、最快的替换使用操作系统字体栈。它即时加载,因为什么都不下载,而且在每个平台上都显得原生。

*, *::before, *::after {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

使用通配选择器是刻意为之。网站会把字体应用到几十个元素上,试图逐个捕获每一个是一场必败的游戏。先覆盖所有,然后再做例外。

让代码保持等宽

在上面的全面覆盖之后,代码块会失去它们的等宽字体。把它恢复,让代码片段保持对齐。

code, pre, kbd, samp, tt,
.hljs, [class*="language-"] {
  font-family: "JetBrains Mono", "Fira Code",
    Consolas, "SF Mono", Menlo, monospace !important;
}

使用自定义网络字体

想要更有辨识度的东西?用 @font-face 从 CDN 拉取一种字体,然后应用它。这会加载 Inter,一种干净且高度易读的无衬线字体。

@font-face {
  font-family: "Inter Web";
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
body, p, div, span, li, a, h1, h2, h3, h4 {
  font-family: "Inter Web", sans-serif !important;
}

因为 JustZix 把这段 CSS 注入到页面里,@font-face 规则就像网站作者自己写的那样工作。挑选任何你信任的 WOFF2 URL。

趁此机会改善可读性

替换字体是修正字重和渲染的好时机。许多网站把正文文字设得太细。

body {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

一个对阅读障碍友好的选项

如果标准字体难以阅读,就换成一种专为此设计的字体并放松间距。

* {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}

需要留意的事

• 始终为代码重新声明等宽字体,否则代码片段会变得错位。
• 使用 font-display: swap,这样在网络字体加载时文本永远不会消失。
• 测试图标字体——有些网站通过字体族渲染图标,全面规则可能会把它们隐藏。把它们的选择器排除掉。
• 保存一套字体栈,这样你就能在每条规则里复用它。

接下来,在我们关于舒适阅读的指南里调整大小和间距。从现成示例获取更多代码片段,或者如果你是第一次设置,下载 JustZix。