在Windows 7和Windows中的Firefox上使用CSS转换进行字体渲染8看起来非常颗粒状，锯齿状

时间：2017-01-19 10:51:39

标签： html css firefox fonts rendering

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

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

  

enter image description here

渲染Firefox，Windows 7：

  

enter image description here

我发现一些直接字体的类似抗锯齿问题，特别是在移动设备上，不确定是否相关。这是TrustedReviews.com的渲染比较，在Firefox中看起来很糟糕（粗糙）的直字体（Chrome左侧，Firefox右侧）。

enter image description here

字体选择似乎无关紧要，将字体更改为基本字体，例如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>

1 个答案:

答案 0 :(得分：1)

我将自行解决这个问题，因为该决议可能会帮助其他人。

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

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

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

相关问题
最新问题