模糊文本，因爲在半個像素上翻譯（-50％，-50％）位置

Question

我在轉換時遇到了問題：翻譯（-50％，-50％）與Chrome中的谷歌字體結合使用。這種組合使文本看起來模糊。我注意到它是由翻譯引起的，在查看元素的位置後，我注意到它位於半個像素上。我可以用translate（calc（-50％ - 0.5px），-50％）修復它，但是比這個解決方法有更好的解決方案。

在使用百分比時，有沒有辦法將像素舍入爲整數？

Answer 1

您可以嘗試在父級上設置transform-style: preserve-3d，或者修改transform屬性以包含perspective(1px)。