根本原因是浏览器对monospace的fallback策略不同，需显式定义含"sfmono-regular"、consolas等跨平台字体的完整font-family栈，并重置font-size和line-height以统一渲染。
code标签字体不一致的根本原因
浏览器对code的默认font-family都设为monospace，但这只是泛型，不是具体字体。Chrome 可能 fallback 到Consolas，Safari 倾向Menlo，Windows Edge 用Courier New，Mac 上SFMono-Regular优先级高——结果就是同一段console.log()在不同系统里字宽、行高、甚至基线位置都肉眼可辨地错位。
必须显式声明完整字体栈
只写font-family: monospace等于没写。要跨平台统一，得按优先级列全字体名，并用英文双引号包裹含空格或特殊字符的名称：
-
"SFMono-Regular"（macOS 现代终端字体，首选） -
Consolas（Windows 最佳等宽，无需引号但加了更稳） -
"Liberation Mono"（Linux 常见开源替代） -
Menlo（旧版 macOS 兜底） -
monospace（终极 fallback，不能省）
推荐一行写死：code { font-family: "SFMono-Regular", Consolas, "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, "Liberation Mono", Menlo, monospace; font-size: 0.95em; line-height: 1.4; }
第三方样式和嵌套结构常覆盖你的规则
即使写了全局code样式，以下情况仍会失效：
- Bootstrap、Tailwind 等 UI 库自带更高 specificity 的
code规则 - Markdown 渲染器输出的是
<pre class="brush:php;toolbar:false;"><code class="js"></code></pre>，需单独写pre code选择器 - 内联
style="font-family:..."直接无视 CSS 层叠
检查方式：DevTools → 选中code元素 → 看「Computed」面板里font-family来源。若不是你的规则，要么提高选择器权重（如body code），要么临时加!important（仅限紧急修复）。
code和pre的语义分工：单行片段用code，多行代码必须套pre；混用或漏掉任一，格式或语义就立刻出问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
