<tt>标签不能可靠实现打字机效果，因其是HTML 3.2废弃标签，不控制字符宽度对齐、不处理空格折叠、不支持CSS动画关键帧，导致中文错位、全角空格塌缩、IE失效。
为什么 <tt> 标签不能可靠实现打字机效果
<tt> 是 HTML 3.2 的废弃标签，现代浏览器虽仍能渲染（通常等价于 font-family: monospace），但它不控制字符宽度对齐、不处理空格折叠、也不支持 CSS 动画关键帧。直接用它套一段文字加 animation: typing 3s steps(20, end)，你会发现：中文字符错位、全角空格塌缩、IE 中完全不生效。
真正需要的是「等宽字体 + 空格保留 + 字符级控制」三者协同：
-
font-family必须显式设为等宽字体，如'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace -
white-space: pre或pre-wrap阻止换行和空格合并 - 动画必须基于字符逐个显示，不能靠
width或opacity模糊过渡
用 monospace + steps() 实现像素级对齐的打字机
核心是让每个字符在动画中“跳变式”出现，且每个字符占相同水平空间。关键不在标签，而在 CSS 的 steps() 函数与字体度量配合：
.typewriter {
font-family: 'Fira Code', 'Cascadia Code', monospace;
white-space: pre;
overflow-x: hidden;
border-right: 1px solid #000;
animation:
typing 3.5s steps(24, end),
blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
注意点：
-
steps(24, end)的 24 必须等于文本总字符数（含空格），否则最后一两个字符会挤在一起或留白 - 用
width动画的前提是容器inline或inline-block，且父容器不能有text-align: justify干扰 - 中文、英文、数字混排时，确保所选等宽字体真支持 CJK 字符等宽（
Fira Code行，Consolas不行）
JavaScript 动态打字更可控，但别忽略 String.codePointAt()
纯 CSS 对长度固定的提示语够用；一旦要动态插入、支持换行或 emoji，就得 JS 控制。常见错误是用 str.split('') 遍历字符串——遇到 ?（U+1F680）或 ??（带 ZWJ 序列）会切开代理对，导致乱码或偏移。
正确做法：
- 用
for (const ch of str)迭代（ES2015+ 原生支持 Unicode 正确分割） - 逐字符插入
<span>，并设display: inline-block; width: 0.55em（0.55em 是多数等宽字体单字符平均宽度） - 动画用
requestAnimationFrame而非setTimeout，避免帧率抖动影响节奏感
示例节选：
function typeText(el, text) {
let i = 0;
function frame() {
if (i < text.length) {
el.textContent += text[i++];
requestAnimationFrame(frame);
}
}
requestAnimationFrame(frame);
}
IE11 或旧安卓 WebView 中的降级方案
IE11 不支持 steps() 的第二个参数 end，只认 steps(24)（等价于 steps(24, start)），会导致首字符延迟一帧才出现。更糟的是，旧 WebKit 内核对 monospace 解析不一致，1ch 单位可能失效。
稳妥做法：
- 检测
CSS.supports('animation', 'typing 1s steps(1,end)')，不支持则 fallback 到 JS 方案 - 避免用
ch单位，改用em（如width: 0.55em），并针对不同字体微调系数 - 若必须用
<tt>标签（如遗留系统），至少包裹在<div style="font-family: monospace; white-space: pre">里补足样式
字符是否对齐，最终看的是字体文件本身的 glyph 宽度一致性，而不是你用了什么标签。别让 <tt> 给你一种“已经等宽”的错觉。
