文本模糊，因为翻译（-50%，-50%）位于半个像素上

Question

我在使用transform:translate(-50%,-50%)与chrome中的google字体结合时遇到了麻烦。这种组合使文字看起来模糊。我注意到这是由平移引起的，在查看元素的位置后，我注意到它位于半个像素上。我能够使用 translate(calc(-50% - 0.5px), -50%) 修复它，但有比此解决方法更好的解决方案。

使用百分比时是否有办法将像素四舍五入为整数？

Answer 1

您可以尝试在父级上设置

transform-style: preserve-3d

，或者修改您的变换属性以也包括

perspective(1px)

。

Answer 2

自 2024 年 5 月起我们可以使用

round()

transform: translate(round(down,calc(-50%),1px), round(down,calc(-50%),1px))

MDN 链接