Firefox 字体渲染看起来与例如非常不同。铬合金答案

【问题标题】：Firefox font-face rendering looks very different to e.g. ChromeFirefox 字体渲染看起来与例如非常不同。铬合金
【发布时间】：2014-12-10 16:14:57
【问题描述】：

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

在 Firefox 中查看此示例：

在 Chrome 中：

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

我使用的是 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) 显示问题。

【问题讨论】：

显示你正在使用的字体代码
看看这个：stackoverflow.com/questions/4060607/…
令人印象深刻，这甚至看起来不像相同的字体大小。我会尝试删除 svg 版本以进行调试：IIRC，无论如何只有 Chrome 支持 SVG 字体。
是的，看起来两种浏览器都使用非常不同的引擎来渲染字体。不幸的是，删除 svg-url 并没有改变任何东西..
@dippas "正如我在上面写的，我已经按照这个命令的顺序玩了。"

标签： css firefox text-rendering

【解决方案1】：

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

要禁用 DirectWrite，请在地址栏中输入 chrome://flags/ 并找到标有“禁用 DirectWrite”的选项。如果这确实解决了问题，您应该在文本渲染示例中记录一个错误，以便修复它。

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

【讨论】：

感谢您的回复。我正在寻找一种方法来解决这个字体问题，以便它在每个浏览器上看起来没有那么不同，而是基于网站。所以改变浏览器设置或显卡对我来说不是解决方案，抱歉。但是还是很有趣的！
如果您关闭 DirectWrite 并且它修复了您的字体问题，那么不幸的是，这意味着您无法修复网站代码中的问题。没有魔法'让我的字体在所有浏览器的 css 或 html 中看起来都一样。
查看我更新的帖子。该链接在页脚中显示字体问题。正如我上面所写的，我正在寻找 Firefox 的修复程序。您知道基于 Firefox 修复它的方法吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

我遇到了同样的问题，用下面的小东西修复了它

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

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

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

【讨论】：

我使用的字体也保存在我自己的主机上，因为如果你从谷歌检索它们，它不会总是正确加载也不会更快
也许这解决了您的字体问题，但没有解决演示页面上使用的字体问题。我已经按照你说的进行了测试，但这并不影响问题。也许“Dosis”是一种小字体，而文本阴影使您的示例中的字体稳定。

【解决方案4】：

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

如果不出意外，这至少会排除一个变量，使调试更有效。

【讨论】：

你可以自己测试一下。我在演示页面上没有启用缩放，但效果仍然出现。