HTML网页中pre标签的字体怎么设置成等宽字体-html教程-PHP中文网

pre标签需显式声明等宽中文字体栈、使用white-space: pre-wrap、textcontent注入并嵌套code标签，否则中文缩进会塌陷。关键字体栈为'sfmono-regular', consolas, 'liberation mono', menlo, 'microsoft yahei mono', monospace；pre-wrap支持折行；textcontent保留原样；code标签确保高亮与语义。

html网页中pre标签的字体怎么设置成等宽字体

pre标签默认字体不是真等宽，尤其中文会塌陷

浏览器对 pre 的默认样式只是「倾向用等宽字体」，但实际渲染时，monospace 这个关键字在 Windows 或国产系统上常 fallback 到 SimSun（宋体）或 Microsoft YaHei（微软雅黑）——它们是**比例字体**，一个汉字 ≈ 两个英文字符宽，空格更窄，结果就是缩进错位、竖线对不齐、YAML 冒号飘移。这不是你写错了，是字体栈没兜住。

必须显式声明完整等宽中文字体栈

只写 font-family: monospace 等于没写。要强制命中真正等宽的中文字体，得按优先级从高到低列全：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace;
其中 'Microsoft YaHei Mono' 是关键：它是微软雅黑的等宽变体，Windows 上最可靠；Consolas 和 Menlo 分别覆盖 macOS / VS Code 常用环境
删掉任何一项都可能让字体回退到非等宽体，尤其别漏掉末尾的 monospace 作为兜底

white-space: pre-wrap 是缩进安全的底线

只靠 pre 标签默认的 white-space: pre 会拒绝折行，长配置项直接撑破容器。而 pre-wrap 才是生产环境该用的值：

保留所有空格、换行、制表符（\t）
允许自动折行，避免水平滚动条干扰阅读
注意：别被 reset.css 覆盖，检查 DevTools 中 computed 的 white-space 是否真为 pre-wrap
如果内容含 \t，建议 JS 层先做 str.replace(/\t/g, ' ')（转成 4 空格），因为不同浏览器对 \t 宽度解释仍不一致

textContent 注入 + code 标签嵌套是语义和安全双保险

直接往 pre 里塞字符串，用 innerHTML 会解析 HTML 实体（比如 & 变成 &），用 innerText 会丢掉换行。唯一安全方式是：

用 preEl.textContent = configStr —— 原样保留 \n、空格、
必须嵌套 code 标签：<pre class="brush:php;toolbar:false;"><code class="yaml"></code></pre>，否则语法高亮库（Prism.js / highlight.js）无法识别语言类型，屏幕阅读器也读不出这是代码
别写 <pre class="brush:php;toolbar:false;" lang="yaml"></pre> —— lang 属性表示自然语言（如 zh），不是编程语言标识