标签已废弃，应改用语义化HTML元素（如、）配合font-family: monospace等CSS方案，兼顾可访问性、兼容性与精确排版需求。
<tt></tt> 标签已废弃，浏览器渲染它只是出于兼容性容忍，不是标准支持。别再用它——它不语义、不无障碍、工具报错、未来可能直接失效。
为什么<tt></tt>不能继续用
HTML5 规范明确将 <tt></tt> 标记为 obsolete（废弃），意味着：
- 它没有语义，屏幕阅读器不会特殊处理，对残障用户不可见
- Lighthouse、axe 等审计工具会直接报 warning 或 error
- 浏览器未承诺长期支持，某次更新后可能完全忽略该标签，文本退化为默认字体
- 它和 <b></b>、<i></i> 一样，属于纯样式标签，违背现代 HTML 的语义优先原则
用 font-family: monospace 最快替换
最轻量、最通用的替代方式就是 CSS：font-family 指定等宽字体栈，浏览器按顺序 fallback：
.mono {
font-family: 'Consolas', 'Courier New', 'Menlo', monospace;
}
这样写有几个关键点：
- 不要只写 'monospace'，它在不同系统下渲染差异大（Windows 下可能丑、Mac 下可能太细）
- 把具体字体放前面，monospace 必须放在最后作为保底
- 内联样式也行：<p style="font-family: 'Lucida Console', monospace;"></p>，但类选择器更利于复用和维护
按语义选更合适的 HTML 元素
等宽 ≠ 一种用途。不同场景该用不同语义化标签，CSS 可统一控制样式：
<code>：用于计算机代码片段，如console.log()—— 语义清晰，SEO 和可访问性友好-
<kbd></kbd>：表示键盘输入，如<kbd>Ctrl+C</kbd>—— 屏幕阅读器会读作“keyboard” -
<samp></samp>：表示程序输出，如终端返回的File not found -
<var></var>：表示变量名，如<var>username</var>
这些标签默认浏览器就设了 font-family: monospace，你只需加一句全局 CSS 就能统一视觉：
code, kbd, samp, var {
font-family: 'Fira Code', 'Source Code Pro', monospace;
}
需要精确字符宽度？别只靠字体
等宽字体保证每个字符「视觉宽度一致」，但不等于「占据固定像素宽度」——实际渲染还受 font-size、line-height、甚至系统字体 hinting 影响。如果要做 ASCII 艺术、对齐表格列或模拟终端光标定位：
- 必须搭配
white-space: pre或pre-wrap保留空格和换行 - 用
letter-spacing: 0防止字体引擎微调间距 - 极端情况可配合
display: inline-block+ 固定width控制单字占位（比如做打字机动画）
真正难的从来不是让文字看起来等宽，而是让「等宽」在各种设备、缩放比、DPI 下依然稳定 —— 这一点，<tt></tt> 从没解决过，而现代 CSS + 语义化标签组合才真正扛得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
