CSS固定位置字体更改

Question

当我应用position：fixed到一个元素时，字体呈现更薄和像素化。如果位置是相对位置或绝对位置，则字体呈现干净。

我在Firefox和Safari中都注意到了这个问题。发生了什么事？

修改

这是显示文字差异的图像。唯一改变的是职位。 Safari的效果类似，但不那么引人注目。

CSS字体平滑和反别名建议似乎没有什么区别。

Answer 1

这可能是一个渲染问题。在元素上尝试这个以获得更好的渲染效果：

-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;

Answer 2

尝试使用z-index：1并在父元素上定位相对值。 请参阅此视频中的解决方案：

https://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

我可以想象它与彼此有关。