只写 font-family: monospace 不行，因它是泛型而非具体字体，各浏览器 fallback 不同（如 chrome 用 courier new、safari 用 menlo），导致字宽、字号、行高、基线不一致；需显式声明带引号的完整字体栈并重置 font-size 和 line-height。
code 标签的默认字体样式不统一，不是 bug，是浏览器按规范各自 fallback 的结果。直接用 font-family: monospace 无法解决问题，必须显式声明完整字体栈并重置尺寸。
为什么只写 monospace 不行
因为 monospace 是泛型字体族，不是具体字体。Chrome 可能 fallback 到 Courier New，Safari 倾向 Menlo，macOS 上的 SFMono-Regular 在 Windows 根本不存在——最终渲染出的字宽、字号、行高都可能错位，尤其嵌在段落中时基线明显偏移。
- 不同浏览器对
code的默认font-size不一致（Chrome 是smaller，Firefox 是1em） -
line-height未显式设置时，内联code容易撑高整行 - 不加引号的字体名（如
SFMono-Regular）会被解析失败，必须用英文双引号包裹
推荐的 CSS 重置写法
全局生效、跨平台兼容的核心规则：
code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.95em;
line-height: 1.4;
}
-
"SFMono-Regular"和"Liberation Mono"必须加双引号，空格和连字符会导致解析失败 -
Consolas虽是 Windows 原生字体，加引号更安全；monospace放最后作终极兜底 -
font-size: 0.95em比1em更稳妥，避免与正文字号完全等大导致视觉突兀 - 慎用
vertical-align: middle：它会破坏内联布局，优先靠line-height调整对齐
第三方库或 Markdown 渲染器覆盖怎么办
即使你写了全局 code 规则，以下情况仍会失效：
- Bootstrap、Tailwind 等 UI 库自带更高 specificity 的
code样式 - Markdown 解析器（如
remark）生成的是<pre class="brush:php;toolbar:false;"><code>...</code></pre>结构，需单独写pre code规则 - 内联
style="font-family: ..."会直接覆盖 CSS，DevTools 的「Computed」面板里能一眼看出来源
临时修复可用 body code { ... } 提高选择器权重，或加 !important（仅限紧急上线）。
容易被忽略的细节
字体栈顺序不能颠倒：Menlo 放 Consolas 前面，macOS 用户就看不到更现代的 SFMono-Regular；font-size 和 line-height 必须同步重置，否则改了字体却没调尺寸，反而让排版更混乱；pre 和 code 是两个独立标签，pre 默认有 white-space: pre 和 margin，别指望一个规则管住两者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
