code标签字体不一致因浏览器对monospace的fallback策略不同，且font-size默认值各异；需显式声明跨平台字体栈并分开处理pre code与code样式。

code标签默认字体为什么总不一致

因为浏览器对monospace这个泛型字体的 fallback 策略完全不同：Chrome 可能用 Consolas 或 Courier New，Safari 偏爱 Menlo 或 SFMono-Regular，Edge 在 Windows 上常回退到 Courier New。更麻烦的是，font-size 也不统一——Chrome 默认设为 smaller，Firefox 是 1em，结果就是同一段 console.log() 在不同系统里字号、字宽、基线全错位。

必须显式声明完整字体栈，不能只写 monospace

只写 font-family: monospace 等于没写，它不指定任何具体字体，纯靠系统猜。真正有效的写法是按优先级列全跨平台等宽字体，并带英文双引号包裹含空格或特殊字符的字体名：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

code {
  font-family: "SFMono-Regular", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.95em;
  line-height: 1.4;
}

• "SFMono-Regular" 和 "Fira Code" 是现代开发者的首选，支持连字且渲染锐利
• Consolas 在 Windows 上兼容性最好，Menlo 是旧版 macOS 的主力
• "Liberation Mono" 是 Linux 常见开源替代，比 Courier New 更现代
• 末尾保留 monospace 作为终极兜底，防止所有字体都缺失时彻底崩坏

pre code 和普通 code 要分开处理

很多文档里代码块显示异常，根本原因是只改了 code，却忘了 pre code 的样式被第三方库或浏览器默认规则覆盖。尤其 Markdown 渲染器（如 remark）输出的代码块结构是 <pre class="brush:php;toolbar:false;">&lt;code&gt;...&lt;/code&gt;</pre>，它的 font-family 和 white-space 行为与行内 code 完全不同：

• 单独定义 pre code 规则，别指望继承自 code
• pre 默认有 white-space: pre，但若内容超宽，得加 overflow-x: auto 防止横向溢出
• 如果 pre code 里要支持语法高亮，注意高亮库（如 Prism.js）常会往 code 内插入 <span></span>，此时字体设置必须作用到子元素层级
• 检查 DevTools 的「Computed」面板，确认生效的 font-family 确实来自你的 CSS，而不是 Bootstrap、Tailwind 或用户代理样式表

空格、换行和 HTML 实体容易被忽略

code 是行内元素，天生压缩空白符——这不是 bug，是规范行为。你粘贴 ls -l /home（中间多个空格），浏览器只会渲染一个空格；写 <div> 不转义，就会真解析成 DOM 元素。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>命令中关键空格需手动补全或用 <code>  替代（不推荐）；更稳妥的是加 white-space: pre，但必须配合 overflow-x: auto 和固定宽度，否则长命令会撑破容器

HTML 特殊字符必须转义： → <code><，> → >，& → &

多行逻辑代码绝不能硬塞进单个 code 标签，必须用 <pre class="brush:php;toolbar:false;">&lt;code&gt;...&lt;/code&gt;</pre> 结构，否则缩进丢失、括号错位、复制即报错

真正难的不是写出那几行 CSS，而是每次引入新 Markdown 库、UI 框架或编辑器时，都要重新验证 code 和 pre code 是否还受控——它们太容易被更高 specificity 的规则悄悄覆盖。