Skip to main content

文本子像素渲染

Chrome 默认会始终将文本渲染对齐到最近的像素。
这意味着带有 margin-top: 10px 和 margin-top: 10.4px 的文本将被渲染为相同的效果。

🌐 Chrome will by default always render text to align it with the closest pixel.
That means that a text with margin-top: 10px and margin-top: 10.4px will be rendered identically.

这会导致振荡效应，使你的动画不那么平滑，更加生硬。

🌐 This leads to an oscillation effect can make your animations less smooth and more jarring.

为了抵消这种效果，你可以使用以下方式渲染你的文本：

🌐 To counter this effect, you can render your text with:

  • 一个 transform 属性
  • 一个额外的 perspective() 转换
  • 一个 willChange: "transform" CSS 属性

注意这个 200x100 视频的差异：

🌐 Notice the difference in this 200x100 video:


Left side of the video
<div
  style={{
    transform: 'translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
  }}
>
  hi there
</div>
Right side of the video
<div
  style={{
    transform: 'perspective(100px) translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
    willChange: 'transform',
  }}
>
  hi there
</div>

考虑仅在渲染时使用此优化，因为过多的 will-change：transform 会使用更多资源。

🌐 Consider using this optimization only during rendering as excessive will-change: transform will use more resources.

Last updated on