在 Windows 7 和 8 中的 Firefox 上使用 CSS 转换进行字体渲染看起来非常粗糙、锯齿状答案

【问题标题】：Font rendering with CSS transform on Firefox in Windows 7 & 8 looks terribly grainy, jagged在 Windows 7 和 8 中的 Firefox 上使用 CSS 转换进行字体渲染看起来非常粗糙、锯齿状
【发布时间】：2017-06-04 01:04:25
【问题描述】：

If you check, for instance, this shopping page，您可以看到价格倾斜了几度。在 Chrome 上，这看起来“恰到好处”，在 Firefox 上，这看起来非常扭曲（Firefox，最新，在 Win7、Win8 上，但不是 Win10）。

渲染 Chrome（类似于 IE11），Windows 7：

渲染 Firefox，Windows 7：

我发现一些直字体存在类似的抗锯齿问题，尤其是在移动设备上，不确定是否与此相关。这是TrustedReviews.com 的渲染比较，直字体在 Firefox 中也看起来很糟糕（参差不齐）（左侧是 Chrome，右侧是 Firefox）。

字体选择似乎无关紧要，将字体更改为基本字体，例如Arial，在倾斜时仍然呈现糟糕。

这是 Firefox 的渲染问题还是存在解决方案？如果是这样，如何解决？

重现

.product-price span {
    display: block;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    transform: rotate(-7deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.product-price {
    bottom: -29px;
    height: 55px;
    width: 83px;
    font-size: 22px;
    line-height: 45px;
    font-family: 'Arial';
}

<body>
  <div class="product-price">
      <span>€ 15,<small>00</small></span>
  </div>
</body>

【问题讨论】：

在这种情况下尝试使用： text-rendering: optimizeLegibility; -webkit-font-smoothing：抗锯齿；在你的身体标签上。
@Cheesy，刚在本地试了一下，看不出有什么明显的效果。

标签： html css firefox fonts rendering

【解决方案1】：

我将自行解决此问题，因为该解决方案可能对其他人有所帮助。

事实证明，如果我在 Firefox 中打开页面 about:support（出于安全原因，链接不会呈现，您必须自己输入），它会在 Direct2D 条目中显示错误，通常只显示true（启用）或false（禁用）。

support.mozilla.org 上有关字体渲染问题的众多报告之一指出了这一点，特别是 this thread on Firefox 45 failing to render fonts properly 为我指明了正确的方向。

升级我的图形驱动程序后，错误消失了，随之而来的是字体的渲染问题。倾斜的字体现在看起来就像它应该的样子，其他网站上的许多其他字体也是如此。

【讨论】：