直接用 animation + width 模拟打字机不靠谱，因中英文混排、字体变化或响应式场景下 width 像素值失准；真正可控的是字符数，ch 单位配合 css 计数器与 content 渲染才能严格对齐。
为什么直接用 animation + width 模拟打字机不靠谱
因为中英文混排时，width 无法对应字符数；字体变化、缩放或响应式场景下，像素值会失准。真正可控的是字符数量本身——而 ch 单位恰好定义为“当前字体中 '0' 字符的宽度”，天然适配等宽/非等宽字体下的单字符占位。配合 CSS 计数器（counter-increment）和 counter() 函数，才能让动画进度与真实字符数严格对齐。
关键点：CSS 计数器不能直接驱动动画，必须借助 counter() 在 content 中渲染，再用 ch 控制容器宽度裁剪显示范围。
常见错误现象：width: calc(var(--i) * 1ch) 中 --i 是变量而非计数器，无法自动递增；或者误以为 counter() 能在 @keyframes 里参与计算——它不能。
如何用 counter() + ch 实现逐字显现
核心思路：把文字内容写进伪元素的 content，用计数器控制显示长度，再用父容器 overflow: hidden 和动态 width 截断。
- 给容器设
counter-reset: char 0 - 用
@keyframes逐步增加计数器值：counter-increment: char 1（注意：动画里只能写整数增量，不能写变量） - 伪元素
::after的content: counter(char)只能输出数字，所以得把原文本拆成单字符并分别套计数器——这不可行
绕过限制的实操方案：放弃用计数器“生成”文本，改用计数器“索引”预设文本。即——把完整文本写死在 content 中，再用 ch 宽度 + clip-path 或 mask 做视觉裁剪。此时计数器只用于控制动画帧数，ch 才是宽度依据：
span.typewriter {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
span.typewriter::after {
content: "Hello, world! ?";
display: inline-block;
animation: type 3s steps(13, end), blink 0.5s step-end infinite;
}
@keyframes type {
0% { width: 0ch; }
100% { width: 13ch; }
}
这里 13ch 必须手动数清字符数（含空格、emoji），emoji 在多数字体中占 2ch，需实测确认。
ch 在不同字体/浏览器下的实际表现差异
ch 看似可靠，但有三个隐藏陷阱：
- Chrome 和 Safari 对 emoji 的
ch宽度处理不一致：同一 emoji 可能被算作 1ch 或 2ch - 使用
font-variant-numeric: proportional-nums时，数字字符宽度不再等宽，ch仍按 '0' 计算，导致错位 - CSS 变量无法直接参与
steps()的步数计算，例如steps(calc(var(--len)), end)无效——steps()第一个参数必须是字面整数
实操建议：
- 用
getComputedStyle(el).getPropertyValue('font-family')+ 实际测量验证目标字体下 '0' 和目标字符的像素宽度比 - 对 emoji 或图标，改用
inline-flex+transform: translateX()逐个移入，避开ch依赖 - 若需动态文本长度，必须用 JS 读取字符串
.length，再注入style="--len: ${len}"，CSS 仅用于动画执行
用 CSS 变量衔接 JS 动态长度与 ch 动画
纯 CSS 无法获取字符串长度，但可以由 JS 注入变量，再由 CSS 使用。这是目前最健壮的混合方案：
<span class="typewriter" style="--text: 'Hello, 世界! ?'; --len: 12"></span>
CSS 中：
.typewriter {
--text: "";
--len: 0;
}
.typewriter::before {
content: var(--text);
animation: type calc(var(--len) * 0.2s) steps(var(--len), end) forwards;
}
@keyframes type {
to { width: calc(var(--len) * 1ch); }
}
注意：steps(var(--len), end) 在 Chrome 115+ 支持，旧版需降级为 JS 控制 animation-timing-function 或改用 JS 动画。
容易被忽略的细节：当 --len 为 0 时，width: 0ch 仍可能因字体 hinting 显示微小空白；建议加 font-size: 0 于容器，再在伪元素中重置字体大小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
