ch单位最适合打字机动画，因其等于当前字体中“0”的宽度，等宽字体下每字符占1ch，确保逐字精准显现；而em受字符形状影响、px脱离字体上下文。
为什么用 ch 单位比 em 或 px 更适合打字机动画
因为 ch 表示“当前字体中字符 ‘0’ 的宽度”，它天然适配等宽字体下的单字符占位，动画时每步刚好“打出一个字”，不会出现偏移或重叠。用 em 容易受字母形状影响（比如 i 和 w 宽度差一倍），px 则完全脱离字体上下文，换字体就得重调数值。
实操建议：
- 确保文本使用等宽字体（如
'SFMono-Regular', Consolas, 'Liberation Mono', monospace），否则ch的“每字一格”效果会失准 - 动画的
width从0ch动到100ch并不可靠——应精确设为文本字符数 ×1ch，例如 12 个字就写12ch - 若文本含全角中文、空格或 emoji，
ch仍按“0 字符宽度”计算，此时需手动计数或用 JS 动态生成宽度值
steps() 函数必须设为 steps(n, end) 才能逐字显现
steps(12, end) 表示把整个动画过程切成 12 等份，并在每份**结束时**跳变一次。如果漏写 end（即默认 steps(12)），浏览器可能用 start 模式，导致第一帧就显示全部文字，失去“逐字”感。
常见错误现象：
- 动画一闪而过，只看到最终结果 → 检查是否用了
steps(n, start)或没写第二个参数 - 最后一字延迟半拍才出现 → 把
steps(n, end)中的n设小了 1（比如 12 字写了steps(11, end)） - 动画开头有空白帧 → 确保
width起始值是0ch，且元素默认不设overflow: hidden以外的遮罩干扰
关键 CSS 属性组合与兼容性注意点
核心三件套：width + white-space: nowrap + overflow: hidden，缺一不可。仅靠 width 动画无法裁剪文字，必须配合 overflow: hidden 截断；而 white-space: nowrap 防止换行破坏“横向打字”节奏。
实操细节：
- 必须给容器设固定
width（比如width: 12ch），不能依赖max-width或fit-content，否则动画无法触发 - IE 不支持
ch单位（包括 IE11），如需兼容，得用 JS 回退为像素值，或直接放弃 IE - 动画时间建议设为
width: 12ch; animation: type 3s steps(12, end);，让总时长 ÷ 字数 ≈ 单字间隔，避免过快看不清或过慢像卡顿
中文混排时怎么处理全角字符和空格
全角中文、中文标点、中文空格在多数等宽字体里宽度 ≈ 2×ch（因占两个英文字符位），但 ch 本身不区分中英文——它永远等于 “0” 的宽度。所以纯靠 ch 计数会少算一半。
可行方案：
- 统一用英文空格分隔中英文，禁用中文全角空格（U+3000）
- 对纯中文段落，改用
ch× 2：比如 6 个汉字，设width: 12ch，steps(12, end) - 更稳妥的做法是预处理文本：用 JS 统计实际渲染宽度（如
getBoundingClientRect().width），再反推所需ch值，但会增加运行时开销
真正难的不是写对那几行 CSS，而是确认你用的字体在目标设备上确实把每个汉字撑开了 2ch —— 这事连开发者工具都未必能直观告诉你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
