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 行为。直接写 <code>console.log()，Mac 和 Windows 上字宽、字号、行高都可能肉眼可辨地错位。

统一 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），导致嵌入段落时基线错乱。常见错误是只改字体，忽略尺寸：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 用 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 可能被包裹在 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 结构里，需单独处理 &lt;code&gt;pre code&lt;/code&gt;</pre>
• 内联 style="font-family:..." 会直接覆盖 CSS 规则

检查方式：打开 DevTools，选中任意 code 元素，看「Computed」面板里 font-family 是否来自你的规则；若不是，提高选择器权重（如用 body code）或加 !important（仅限紧急修复）。

真正麻烦的不是写几行 CSS，而是不同上下文（普通 HTML、Markdown 输出、组件库封装）下 code 的实际 DOM 结构和样式来源各不相同，得一个个 inspect 才能确认生效点。