应重置code标签的font-family和font-size，推荐font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;字号用1em或0.95em；pre内代码问题用white-space: pre-wrap和overflow-x: auto修复；中英字体混排时须将英文等宽字体前置，引号包裹含空格字体名；行内与块级代码样式需分离控制。
HTML 中 标签默认字体太小、不等宽，怎么改</H3>
<p><code>code
标签浏览器默认用 monospace 字体，但字号常比正文小（如 Chrome 里是 smaller），且未强制等宽一致性。直接写 <code>console.log() 在不同浏览器可能渲染出微差——不是 bug，是规范允许的「用户代理样式表」差异。
- 统一做法：在 CSS 中重置
code 的 font-family 和 font-size，推荐用 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
- 别只设
monospace：它只是泛型，具体字体会 fallback 到系统默认，Mac 和 Windows 渲染效果可能错位
- 字号建议用
1em 或 0.95em，避免用 smaller 这类相对值，否则嵌套时易失控
pre 里面代码缩进乱、换行失效，怎么修
code 的 font-family 和 font-size，推荐用 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
monospace：它只是泛型，具体字体会 fallback 到系统默认，Mac 和 Windows 渲染效果可能错位1em 或 0.95em，避免用 smaller 这类相对值，否则嵌套时易失控pre 默认保留空白符，但若内容来自 JS 动态插入或模板引擎渲染，可能被 HTML 解析器提前“压平”空格；另外，pre 宽度超容器时默认不折行，导致横向滚动或溢出。
- 加
white-space: pre-wrap;：既保留换行和空格，又允许自动折行 - 配
overflow-x: auto;防止长行撑破布局，但注意移动端 touch 滚动体验 - 如果用
pre > code嵌套结构（推荐），记得给code设display: block;，否则内联元素在pre里可能受父级line-height干扰 - 别依赖
pre就够了
CSS 里 font-family 写法一错，整个代码块就变宋体
中文字体混排时，font-family 顺序错了，浏览器会跳过所有英文等宽字体，直奔 SimSun 或 Microsoft YaHei ——它们不是等宽字体，代码对齐立刻崩坏。
- 正确顺序：先写英文主力等宽字体（如
"Fira Code"），再写备选（Consolas），最后才是中文字体（"PingFang SC","Hiragino Sans GB"） - 中文等宽字体极少，
"SFMono-Regular"是 macOS 原生，"Cascadia Code"是 Windows 新默认，别把"Noto Sans CJK"放前面——它不是等宽 - 用引号包裹含空格的字体名，比如
"Source Code Pro"，漏引号会导致整条声明失效
inline-code 和 block-code 样式要分开控制
把 code 和 pre 共用同一套 CSS，很快会发现：行内代码（如函数名 fetch()）被套上背景色+边框后太突兀，而大段代码又缺行号或高亮支持。
立即学习“前端免费学习笔记（深入）”；
- 区分选择器：
code:not(pre > code)控制行内，pre > code控制块级，避免互相污染 - 行内
code推荐加background-color: #f6f6f6;和padding: 2px 4px;，别设border，否则在小字号下显粗 - 块级
pre > code可加tab-size: 4;统一缩进基准，Chrome/Firefox 支持，IE 不支持但已淘汰 - 别在
pre上直接写font-size：应作用于内部code，否则line-height计算容易失准
font-family，实际牵扯到浏览器默认样式、中英字体 fallback 机制、inline/block 渲染差异，还有移动端缩放响应。最容易被忽略的是：没验证过 iOS Safari 下 "SF Mono" 是否真能 fallback 到 monospace，而不是静默退成黑体。 
