CSS 固定位置字体更改答案

【问题标题】：CSS Fixed Position Font ChangingCSS 固定位置字体更改
【发布时间】：2015-04-01 07:10:32
【问题描述】：

当我将 position:fixed 应用于一个元素时，字体会变得更细和像素化。如果位置是相对的或绝对的，字体会清晰呈现。

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

编辑

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

CSS 字体平滑和消除锯齿建议似乎没有什么不同。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：