code标签默认不保证等宽字体，因其仅语义化表示代码，渲染效果取决于系统字体栈；需显式设置跨平台等宽字体栈并注意pre与code嵌套规则。
为什么标签默认不保证等宽字体
code 标签只是语义化标记，表示“这是一段计算机代码”，浏览器不会强制用等宽字体渲染它。实际显示效果取决于系统默认字体栈——Windows 上可能 fallback 到 <code>Courier New（等宽），macOS 可能用 .SF Pro Display（部分场景非等宽），Linux 或旧环境甚至可能用比例字体。你看到的“看起来像等宽”，往往只是碰巧。
必须显式设置 font-family 字体栈
要真正控制等宽效果，得在 CSS 中为 code 元素指定明确的、跨平台兼容的等宽字体栈。不能只写 monospace，那只是通用关键字，不同浏览器实现差异大，且不包含中文兜底。
推荐写法（含中英文兼顾）：
code {
font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
}
-
"SFMono-Regular"和"Consolas"是现代开发环境首选，等宽稳定、字形清晰 -
"Liberation Mono"和Menlo是 Linux/macOS 常见后备，支持良好 - 中文字体如
"PingFang SC"必须放在英文之后，否则会干扰英文字符渲染 - 末尾保留
monospace作为最终兜底，但不可依赖它起效
遇到数字不对齐？别只加 tabular-nums
如果要在 code 里显示表格化数字（比如对齐的金额、行号），光写 font-variant-numeric: tabular-nums 没用——这个属性只是“请求”字体启用等宽数字字形，前提是当前生效的字体真包含该 OpenType 特性。
常见失效原因：
- 用了
Arial或系统默认sans-serif，它们压根没打包等宽数字 - 加载了自定义字体但导出时关掉了
tnum特性（如某些 Fira Code 精简版） - 浏览器计算出的最终字体不是你预期的那个（可用开发者工具「Computed」面板验证）
稳妥做法：选明确支持 tabular-nums 的字体，例如 Fira Code、Source Code Pro 或 IBM Plex Mono，并配合 @font-face 加载，同时检查其 OpenType 特性是否启用。
单行 vs 多行：别混用 code 和 pre
code 是行内元素，会忽略换行和多余空格；pre 是块级元素，保留所有空白符。如果你把多行代码塞进 <code>...，缩进和换行全丢，视觉上就乱了。
正确组合：
- 单行片段：
<code>console.log("hello")—— 用纯code，配上面说的字体栈即可 - 多行代码：
<pre class="brush:php;toolbar:false;"><code>function foo() {<br> return true;</code></pre>—— 必须嵌套，pre控制格式，code提供语义 - 注意：
pre默认无内边距、无背景色、无圆角，这些都要自己用 CSS 补上
最容易被忽略的一点：无论单行还是多行，只要涉及代码展示，font-family 都得显式设，不能指望浏览器猜。等宽不是默认，是选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
