Question

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

在Firefox中查看此示例：

Firefox

在Chrome中：

Chrome

我不知道导致这个问题的原因。我已尝试使用text-rendering，我也尝试更改url声明中@font-face - 属性的顺序。

我使用的是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;
}

正如我上面所写，我已经按照这个命令的顺序玩了。

在我的特定问题中，您可以看到this page (footer)显示问题。

Answer 1

大多数现代浏览器使用Windows上的DirectWrite来呈现文本，Chrome除外。幸运的是，他们现在正在实施它，它最近被设置为最新Chrome版本中的默认设置。这是个好消息，坏消息是它仍然存在错误并且并不总是正确地呈现字体。你可以通过禁用它来查看是否存在这个问题。

要在地址栏中禁用DirectWrite类型chrome://flags/，请找到标记为“禁用DirectWrite”的选项。如果这确实解决了问题，您应该记录文本呈现示例的错误，以便修复它。

您可以在http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html的Chrome博客上详细了解相关信息。

Answer 2

这似乎是一个字体问题，因为所有为他人工作的机会都不会影响问题。切换到另一种字体是目前唯一的解决方案。

Answer 3

我遇到了同样的问题并用以下小东西修复了

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

换句话说，只需添加文字阴影，它就可以正常工作，使用正确的颜色作为艺术家。试试这个

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

Answer 4

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

如果没有别的，这至少会排除一个变量，使调试更有效。

Firefox字体 - 面部渲染看起来与例如铬

4 个答案: