在 Windows 7 和 8 中使用 CSS 变换在 Firefox 上呈现的字体看起来非常粗糙、参差不齐

Question

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

渲染Chrome（类似于IE11），Windows7:

渲染 Firefox，Windows7:

我发现一些直接字体存在类似的抗锯齿问题，尤其是在移动设备上，不确定这是否相关。这是 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>

Answer 1

我将self-solve解决这个问题，因为该解决方案可能会对其他人有所帮助。

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

support.mozilla.org with regards to font rendering issues, in particular, this thread on Firefox 45 failing to render fonts properly 上的众多报告之一指出了这一点，为我指明了正确的方向。

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

在 Windows 7 和 8 中使用 CSS 变换在 Firefox 上呈现的字体看起来非常粗糙、参差不齐

Font rendering with CSS transform on Firefox in Windows 7 & 8 looks terribly grainy, jagged

html

css

firefox

fonts

rendering

渲染Chrome（类似于IE11），Windows7:

渲染 Firefox，Windows7:

重现