跨平台字体渲染差异导致动画文字偏移，需统一用Web Font、SVG text及document.fonts.load()确保对齐稳定。
字体渲染差异直接导致动画文字位置偏移
Windows 默认用 ClearType 做亚像素渲染，Mac 用的是灰度抗锯齿（subpixel rendering 被禁用），同一 font-size、line-height 下，文字实际占用高度和 baseline 对齐位置经常差 1–2px。动画中若依赖 getBoundingClientRect() 或 CSS transform: translateY() 对齐文字，就会在跨平台时“飘”起来。
- 动画关键帧里避免用
em或ex单位做垂直位移，改用px并预留 ±1px 容错 - 设置
font-smoothing: antialiased+-webkit-font-smoothing: antialiased强制 Mac 禁用 subpixel，让两边都走灰度渲染（注意：这会让 Mac 文字略发虚，但对齐稳定） - Windows 上可加
-ms-text-autospace: none防止 IE/Edge 旧引擎额外插入空格影响宽度计算
CSS 动画中 font-family 回退链必须显式声明
Mac 和 Windows 自带字体完全不同："Helvetica Neue" 在 Mac 可用，Windows 没有；"Segoe UI" 是 Windows 默认，Mac 不认。如果只写 font-family: "Helvetica Neue", sans-serif，Windows 会跳过第一项直奔 sans-serif，而该泛型在不同系统映射的字体（如 macOS 的 .SF NS vs Windows 的 Segoe UI）字宽、x-height 差异明显，导致动画中文字流重排或容器尺寸抖动。
- 必须写全跨平台等效链：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif - 若用自定义字体，确保
@font-face中font-display: swap，并用font-weight和font-style显式匹配 fallback 字体的粗细/斜体，否则加载期间回退字体可能触发 layout shift
requestAnimationFrame 中获取文字尺寸要等字体就绪
动画启动时若立即读取 offsetHeight 或调用 getComputedStyle(el).fontSize，可能拿到未加载完成的 fallback 字体尺寸——尤其 Web Font 加载慢时，Mac 和 Windows 渲染时机不一致，造成首帧错位。
- 不要用
DOMContentLoaded当字体就绪信号，改用document.fonts.load()：document.fonts.load('16px "Inter"').then(() => { // 此时再启动 rAF 动画 requestAnimationFrame(animate); }); - 若兼容性要求高（IE 不支持
document.fonts），可用FontFaceObserver库，或监听webfontloader的active事件
SVG 内嵌文字动画比 HTML 文字更可控
HTML 文字受系统渲染引擎强干预，而 SVG 的 textPath）、逐字延迟（animateTransform）时，跨平台稳定性高一截。
立即学习“前端免费学习笔记（深入）”；
- 把需要精确控制的标题、标签类文字抽成 SVG
viewBox固定坐标系 - 避免在 SVG 中用
font-family依赖系统字体；优先转为path（适合静态文案）或用@font-face注入同一批 Web Font - 注意：SVG 中
dominant-baseline默认是alphabetic，而 HTML 是auto，手动设成middle或central才能对齐
字体渲染不是“设个 CSS 就完事”的环节，它卡在文本度量、布局计算、光栅化三个阶段之间，任一环节跨平台不一致，动画就会在某个系统上突然失准。最稳妥的做法是：放弃对系统字体的假设，用 Web Font 锁定字形，用 SVG 锁定渲染上下文，再用 document.fonts.load() 锁定执行时机。
