code标签字体不一致的根本原因是浏览器对泛型monospace的fallback策略不同，需显式定义含"sfmono-regular"、consolas、"cascadia code"等跨平台字体的完整font-family栈，并重置font-size和line-height以统一渲染。
code标签字体不一致的根本原因
不是你写错了，是浏览器默认用monospace这个泛型字体族，但各系统 fallback 策略完全不同：Chrome 可能选 Consolas，Safari 倾向 Menlo，Windows Edge 容易落到 Courier New，而 macOS 上若没装字体，甚至会退到非等宽的 Helvetica。结果就是同一段 fetch()，在不同设备上字宽、基线、行高全都不对齐。
必须显式声明完整字体栈
只写 font-family: monospace 等于没写——它不指定任何具体字体，纯靠系统猜。真正有效的写法要满足三点：
- 英文主力等宽字体前置：
"SFMono-Regular"（macOS）、Consolas（Windows）、"Cascadia Code"（Win11 新默认） - 补跨平台兼容字体：
"Liberation Mono"（Linux）、Menlo（macOS 旧版） - 末尾加
monospace保底，且所有含空格或特殊字符的字体名必须用英文双引号包裹
推荐一行直接复制：code { font-family: "SFMono-Regular", Consolas, "Cascadia Code", "Liberation Mono", Menlo, monospace; }
font-size 和 line-height 必须重置
Chrome 给 code 设的是 font-size: smaller，Firefox 是 1em，嵌进段落里立刻错位。别信“继承正文”这种直觉：
- 字号统一用
font-size: 0.95em或14px，避免smaller这类相对值在嵌套中失控 - 加
line-height: 1.4防止内联code挤压上下文行距 - 慎用
vertical-align: middle：它会破坏行内流布局，优先靠line-height调整视觉对齐
完整最小可用样式：code { font-family: "SFMono-Regular", Consolas, "Cascadia Code", monospace; font-size: 0.95em; line-height: 1.4; }
第三方库和 Markdown 渲染器常绕过你的 CSS
即使你写了全局规则，这些情况仍会让 code 样式失效：
- Bootstrap、Tailwind 等 UI 库自带更高 specificity 的
code规则 - Markdown 解析器（如 remark）生成的是
<pre class="brush:php;toolbar:false;"><code></code> 结构，你的 <code>code</code> 规则不作用于 <code>pre > code</code></pre> - 某些 CMS 或编辑器插入的
code带内联style="font-family:..."，直接覆盖 CSS
检查方式：打开 DevTools → 选中任意 code 元素 → 看「Computed」面板里的 font-family 是否来自你的样式表。若不是，要么提高选择器权重（比如写 body code），要么对 pre > code 单独处理——真正的麻烦从来不在第一行 CSS，而在你没意识到的第二层嵌套和第三方干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
