code标签字体不一致的根本原因是monospace为泛型字体，各系统fallback策略不同；需显式声明优先级明确的字体栈并重置font-size、line-height，多行代码必须用pre+code嵌套。
code标签字体不一致的根本原因
不是浏览器“出错”，而是monospace只是泛型，各系统 fallback 策略不同：Chrome 常用 Consolas 或 ui-monospace，Safari 倾向 Menlo 或 SFMono-Regular，Windows Edge 可能回退到 Courier New。结果就是同一段 console.log() 在 Mac 和 Windows 上字宽、行高、甚至基线位置都肉眼可辨地错位。
必须显式声明 font-family 栈
只写 font-family: monospace 不够，它不指定具体字体，无法控制 fallback 顺序。要跨平台稳定，得手动列出优先级明确的字体链：
-
"SFMono-Regular"（macOS 现代等宽首选，含空格必须加双引号） -
Consolas（Windows / VS Code 用户最熟悉） -
"Liberation Mono"（Linux 主流发行版预装） -
Menlo（macOS 较旧版本兜底） -
monospace（终极泛型兜底，不可省）
完整声明示例：code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
font-size 和 line-height 必须重置
Chrome 对 code 默认设 font-size: smaller，Firefox 是 1em，Safari 可能继承父级但计算方式不同——这直接导致内联 code 插在段落中时上下错位、文字挤在一起。
- 统一用
font-size: 1em或固定值（如14px），确保与周围文本对齐 - 加
line-height: 1.4防止多行内联代码（如命令行参数）行距过紧 - 慎用
vertical-align: middle：它会破坏行内布局节奏，优先靠line-height调整
pre + code 嵌套才是多行代码的唯一正解
单独用 code 写多行 JS 或 Shell 脚本，换行和缩进全被浏览器忽略——这不是 bug，是它的设计定位：它只是语义标记，不是格式容器。
- 多行代码必须用
<pre class="brush:php;toolbar:false;"><code>...</code></pre>结构，pre保留空格与换行，code声明语义 -
pre上加overflow-x: auto，否则长行直接撑破容器；code设display: block才能响应滚动 - 代码中含
、<code>>、&必须转义为<、>、&，否则会被解析为标签 - 单行片段（如
npm install、/src/index.js）仍用纯code，塞进pre会引入多余 margin 和语义错误
真正容易被忽略的是混用边界：有人把整段 Bash 脚本当行内内容塞进 code，有人给 fetch() 单独包一层 pre。判断标准只有一个——要不要保留原始换行和缩进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
