Chrome中的模糊文字，任何修复？

Question

我有一个拥有大量弹出窗口的应用程序，我将它们定位如下：

.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

但有些弹出窗口模糊不清。这种转变：翻译是什么杀死它。据我所知这是chrome问题，但解决这个问题的最佳方法是什么？

Answer 1

这不是代码中的错误，这是众所周知的Webkit呈现错误。例如，请参阅：https://support.mozilla.org/pl/questions/1075185（以及FF支持论坛上的更多主题）。

在Chrome和FF中，在高级浏览器设置中，您可以关闭所谓的“硬件加速”。此设置用于让您的硬件在进行高级图形渲染时“帮助”浏览器。对于您使用翻译的元素和其他一些规则，硬件加速会自动打开。实际上，有些人会在没有经验的“超级css黑客”中使用它来在某些情况下实现更好/更清晰的渲染。

但有时它会导致更糟糕而不是好事，这就是你的情况。在浏览器中关闭硬件加速后，字体非常清晰。可悲的是，代码没有真正的解决方案，你不能强迫它为给定的元素关闭。我们依赖于Webkit开发人员在这里修复渲染引擎。你只能乱砍，例如将字体大小更改为一个没有真正原因渲染效果更好的字体。或者以某种不涉及翻译的方式改变定位。祝你好运。

Answer 2

您可以在.css中尝试：

.myfont{
-webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}