code标签默认字体不一致是因为各浏览器对monospace的fallback策略不同，需显式定义含SFMono-Regular、Consolas等跨平台字体的完整font-family栈，并重置font-size和line-height以统一渲染。
code 标签默认字体为什么看起来不一致
code 标签在浏览器中默认用 monospace 字体族，但实际渲染依赖用户代理样式表——Chrome 会设 font-size: smaller，Safari 可能用 Menlo，Windows Edge 倾向 Courier New。这不是 bug，而是规范允许的 fallback 行为。直接写 console.log()
统一 font-family 必须带完整回退链
只写 font-family: monospace 不够：它只是泛型，不指定具体字体，系统会按自身策略 fallback，结果不可控。必须显式列出优先级明确的字体栈：
- 优先用现代等宽字体（如
"SFMono-Regular"、Consolas） - 补上跨平台兼容字体（
"Liberation Mono"、Menlo） - 末尾加
monospace作为终极兜底
推荐写法：
code {<br> font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;<br>}
注意引号：含空格或特殊字符的字体名（如 "SFMono-Regular"）必须加英文双引号，系统字体名（如 Consolas）可不加，但加了更安全。
font-size 和 line-height 也要重置
不同浏览器对 code 的默认 font-size 差异明显（Chrome 是 smaller，Firefox 是 1em），导致嵌入段落时基线错乱。常见错误是只改字体，忽略尺寸：
- 用
font-size: 1em或具体值（如14px）强制对齐正文 - 加
line-height: 1.4避免行距过紧（尤其内联code在段落中时） - 慎用
vertical-align: middle：它可能破坏行内布局，优先靠line-height调整
完整示例：
code {<br> font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;<br> font-size: 0.95em;<br> line-height: 1.4;<br>}
全局设置后仍要留意内联样式和第三方库覆盖
即使你写了全局 code 规则，以下情况仍会失效：
- 某些 UI 库（如 Bootstrap、Tailwind）自带
code样式，且 specificity 更高 - Markdown 渲染器（如 remark、marked）生成的
code可能被包裹在<code></code> 结构里，需单独处理 <code>pre code</code>
- 内联
style="font-family:..."会直接覆盖 CSS 规则
检查方式：打开 DevTools，选中任意 code 元素，看「Computed」面板里 font-family 是否来自你的规则；若不是，提高选择器权重（如用 body code）或加 !important（仅限紧急修复）。
真正麻烦的不是写几行 CSS，而是不同上下文（普通 HTML、Markdown 输出、组件库封装）下 code 的实际 DOM 结构和样式来源各不相同，得一个个 inspect 才能确认生效点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
