code标签字体不一致的根本原因是各系统对monospace的fallback策略不同且默认font-size不统一，须显式设置含"sfmono-regular"、consolas、"liberation mono"、menlo、monospace的完整字体栈，并重置font-size和line-height。
code 标签字体不一致的根本原因
不是浏览器 bug，而是各系统对 monospace 的 fallback 策略不同：Chrome 在 Windows 上倾向 Courier New，macOS Safari 默认用 Menlo，而 Linux 可能回退到 Liberation Mono。更关键的是，code 的默认 font-size 也不统一（Chrome 是 smaller，Firefox 是 1em），导致嵌入段落时基线错位、字宽发虚或行高塌陷。
必须显式声明 font-family 字体栈
只写 font-family: monospace 不够——它只是泛型，不指定具体字体，系统会按自身策略 fallback，结果不可控。要跨平台稳定，得手写完整优先级链：
- 把现代等宽字体放最前：
"SFMono-Regular"（macOS）、Consolas（Windows） - 补上兼容层：
"Liberation Mono"（Linux）、Menlo（旧版 macOS） - 末尾必须加
monospace作为终极兜底 - 所有含空格或特殊字符的字体名必须用英文双引号包裹，比如
"SFMono-Regular"，否则解析失败
推荐写法：code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
font-size 和 line-height 必须重置
不同浏览器对 code 的默认字号差异明显，直接导致内联 code 在段落中“下沉”或“上浮”。只改字体不改尺寸，等于白调。
- 用
font-size: 0.95em或14px强制贴近正文基线，避免smaller带来的不确定性 -
line-height: 1.4是安全值：太小（如 1.2）会让多行pre code拥挤，太大（如 1.6）又破坏段落节奏 - 慎用
vertical-align: middle—— 它依赖父元素行高计算，容易被第三方库覆盖或在 flex 容器中失效
完整最小可用规则：code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.95em; line-height: 1.4; }
警惕全局设置被覆盖的三种常见场景
即使你写了上述 CSS，仍可能在页面中看到 code 渲染异常，大概率是以下情况之一：
- UI 框架（如 Bootstrap、Tailwind）自带更高 specificity 的
code规则，需检查 DevTools「Computed」面板确认生效来源 - Markdown 渲染器输出的是
<pre class="brush:php;toolbar:false;"><code>...</code>></pre>结构，pre code需单独处理，不能只靠code选择器 - 内联样式如
<code style="font-family: 'Courier New'">会直接覆盖外部 CSS，且无法用普通选择器对抗
临时修复可用 body code 提高权重，紧急时加 !important，但长期应清理冲突源。真正麻烦的不是写几行 CSS，而是不同上下文（普通 HTML、pre 块、Markdown 输出、iframe 内嵌）对同一标签的样式争夺。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
