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>最佳答案
我将自行解决此问题，因为该解决方案可能会对其他人有所帮助。
事实证明，如果我在 Firefox 中打开页面 about:support(出于安全原因，链接不会呈现，您必须自己输入)，它会在 Direct2D 条目，通常只显示 true(启用)或 false(禁用)。
关于 support.mozilla.org 的众多报告之一指出了这一点关于字体渲染问题，特别是 this thread on Firefox 45 failing to render fonts properly为我指明了正确的方向。
升级我的图形驱动程序后，错误消失了，随之而来的是字体渲染问题。倾斜的字体现在看起来就像它应该的那样，其他网站上的许多其他字体也是如此。
关于html - 在 Windows 7 和 8 的 Firefox 上使用 CSS 转换呈现的字体看起来非常粗糙、锯齿状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41739972/