Firefox字体渲染与Chrome等浏览器有很大不同

Question

Firefox字体渲染与Chrome等浏览器有很大不同

cssfirefoxtext-rendering

8

我在CSS中使用@font-face时遇到了问题。我使用的字体在不同的浏览器中看起来非常不同。

在Firefox中看这个例子： Firefox

在Chrome中看这个例子： Chrome

我不知道是什么原因导致了这个问题。我已经尝试使用text-rendering，并且还尝试改变@font-face声明中url属性的顺序。

我正在使用Windows 7 Professional和Firefox V30。

请问有人能告诉我这个问题的原因，并告诉我如何解决吗？

非常感谢。

//编辑：这是我正在使用的@font-face声明：

@font-face {
    font-family: 'MyFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix') format('embedded-opentype'),
        url('myFont.svg#myfont') format('svg'),
        url('myFont.woff') format('woff'),
        url('myFont.ttf') format('truetype');
    font-style: normal;
    font-weight : normal;
}

如我之前所述，我已经尝试过更改这些命令的顺序。

在我的问题中，您可以查看此页面（页脚）以查看问题。

- dude

展示你正在使用的字体代码。 - dippas

请看这个链接：https://dev59.com/nm855IYBdhLWcg3w-JMr#9041280 - dippas

令人印象深刻，这甚至看起来都不是相同的字体大小。为了调试目的，我会尝试放弃SVG版本：如果我没记错的话，只有Chrome支持SVG字体。 - Ulrich Schwarz

是的，看起来两个浏览器使用非常不同的引擎来呈现字体。不幸的是，删除svg-url并没有改变任何东西... - dude

@dippas “就像我之前所写的那样，我已经尝试过更改这些命令的顺序。” - dude

显示剩余4条评论

4个回答

3

这似乎是字体问题，因为对其他人有效的所有解决方案都无法解决这个问题。目前唯一的解决方法是切换到另一种字体。

- dude

1

我遇到了同样的问题，并通过以下小方法解决了它。

color:#505563;
font-family: 'Dosis', sans-serif;
text-shadow: 0px 1px 2px #eeeeee;

换句话说，只需添加文本阴影，它就能正常工作，像艺术家一样尝试正确的颜色。尝试这个。

text-shadow: 0px 0px 1px #eeeeee;

- user3192318

我使用的字体也保存在自己的主机上，因为如果从谷歌检索它们，它们不一定会正确加载或更快。 - user3192318

也许这解决了你字体的问题，但并没有解决演示页面上使用的字体问题。我按照你说的进行了测试，但并没有影响到问题。也许“Dosis”是一种小字体，在你的示例中，文本阴影使字体更加稳定。 - dude

0

浏览器具有覆盖CSS的辅助功能。确保文本或页面设置没有缩放。请参见https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages。

如果没有其他问题，这至少可以排除一个变量，使调试更加有效。

- Ken

你可以自己进行测试。演示页面上没有启用缩放，但效果仍然出现。 - dude

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bill · Accepted Answer

大多数现代浏览器在Windows上使用DirectWrite来渲染文本，除了Chrome。幸运的是它们正在实施它，最新版本的Chrome中已将其设置为默认选项。好消息是它仍然存在漏洞并且不总是能正确地呈现字体。您可以通过禁用它来查看是否存在问题，以查看是否解决了问题。

要禁用DirectWrite，请在地址栏中键入chrome://flags/，然后找到标有“禁用DirectWrite”的选项。如果这确实解决了问题，则应记录具有您文本呈现示例的漏洞，以便可以修复它。

您可以在Chrome博客上阅读更多关于此的信息：http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html。