code 渲染非等宽是因默认不强制等宽字体，依赖不可靠的浏览器UA样式；需用CSS显式声明font-family并合理兜底，且多行代码必须用pre+code组合保障语义与格式。

code 标签本身不保证等宽字体在所有环境里生效，必须配合 CSS 显式声明 font-family: monospace 才可靠。

为什么 code 渲染后不是等宽字体？

浏览器虽对 code 有默认样式（如 Chrome 用 monospace），但这个行为不强制、不可依赖：某些系统字体缺失、用户自定义样式表覆盖、或文档未声明 都可能导致回退到比例字体。更关键的是，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 加内联或全局样式，不要依赖浏览器默认：

Wechat Article Html

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

下载

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 字符（如

），就必须转义并套 pre —— 否则格式塌陷、语义错误、辅助技术无法识别。

• 正确：

  调用 fetch() 发起请求

• 错误：function hello() {
  return 'hi';
}（
不被 code 解析，空格被压缩）
• 展示 HTML 片段必须转义：
  ，否则浏览器直接解析标签

真正容易被忽略的是：等宽字体只是基础，code 的语义完整性依赖结构——单用它展示多行逻辑，既破坏可访问性，又让后续维护者误判代码意图。该用 pre 套 code 的地方，硬塞进 code 里，等于把源码当普通文本处理。