字体Arial在Chrome和Firefox中有不同的结果

Question

我在不同浏览器中显示字体时遇到问题。在我的CSS样式中，我向font-family: Arial !important;声明了font-weight:normal;和body。当我使用mozilla firefox和chrome打开我的网站时，mozilla中的字体似乎比chrome更粗。

我也使用reset.css，但它没有任何不同。像ie和opera这样的另一个浏览器给出与chrome相同的结果。

任何人都知道如何强制每个浏览器中的字体彼此相同？

Answer 1

请不要在此引用我，但我记得有些关于Chrome渲染文本的内容与其他CSS引擎的传统方式略有不同。所以你有可能没有做错任何事情，只是浏览器。

请确保已打开DirectWrite。 （应该是您的Chrome是最新的）

你可以通过转到chrome：// flags并查看“DirectWrite”行来做到这一点。

你必须记住，文本看起来的方式更依赖于浏览器的渲染能力 - 比CSS更多。我知道这听起来很奇怪，但你并不是唯一一个：

The same font looks different in Chrome vs. Firefox, IE and Safari

Arial in Chrome

Fonts looks different in Firefox and Chrome

抱歉，我知道它并没有直接回答您的问题，但我只是想让您知道它可能更像是一个浏览器问题，而不是CSS问题。

Answer 2

我认为这是因为Mozilla和Chrome使用了不同的CSS引擎，因此我可以检查两者是否使用相同的字母而且不同的确是最小的，只是因为那些是不同的Web浏览器，它们永远不会完全相同至少没有相同的说明。