code 渲染非等宽是因默认不强制等宽字体，依赖不可靠的浏览器UA样式；需用CSS显式声明font-family并合理兜底，且多行代码必须用pre+code组合保障语义与格式。
code 标签本身不保证等宽字体在所有环境里生效，必须配合 CSS 显式声明 font-family: monospace 才可靠。
为什么 code 渲染后不是等宽字体？
浏览器虽对 code 有默认样式（如 Chrome 用 monospace），但这个行为不强制、不可依赖：某些系统字体缺失、用户自定义样式表覆盖、或文档未声明 <meta charset="utf-8"> 都可能导致回退到比例字体。更关键的是，code 默认不设 font-family，只靠 UA stylesheet 维持，而 UA stylesheet 可被重置（比如某些 CSS reset 库会清空它）。
- 检查是否被全局 CSS 覆盖：比如
* { font-family: sans-serif; }会穿透到code内部 - 中文字体需单独指定：仅写
monospace在中文环境常 fallback 到宋体，应补充font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - 移动端 Safari 对
monospace解析较弱，建议加font-size: 14px避免自动缩放干扰字宽
如何让 code 真正稳定显示为等宽？
最简且兼容的写法是给 code 加内联或全局样式，不要依赖浏览器默认：
code {
font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.95em;
}-
ui-monospace是现代 CSS 新增的系统等宽字体关键字，iOS/macOS 支持良好 - 把开源编程字体（如 Fira Code）放在前面，兼顾连字和可读性；但注意 CDN 加载失败时要兜底到系统字体
- 避免只写
font-family: monospace—— 它不指定具体字体，不同系统渲染差异大
行内代码 vs 多行代码：别混用 code 和 pre
code 只适合嵌在句子中的短内容，比如函数名、命令、属性值；一旦含换行、缩进或 HTML 字符（如 <div>），就必须转义并套 <code>pre —— 否则格式塌陷、语义错误、辅助技术无法识别。
- 正确：
<p>调用 <code>fetch()发起请求 - 错误：
<code>function hello() {<br> return 'hi';<br>}（<br>不被code解析，空格被压缩） - 展示 HTML 片段必须转义：
<code><div class="app"></div>，否则浏览器直接解析标签
真正容易被忽略的是：等宽字体只是基础，code 的语义完整性依赖结构——单用它展示多行逻辑，既破坏可访问性，又让后续维护者误判代码意图。该用 pre 套 code 的地方，硬塞进 code 里，等于把源码当普通文本处理。
