不同浏览器中的字体粗细问题，相同的字体在不同浏览器中看起来不同

Question

我正在开发 Asp.net MVC 应用程序。

在我的应用程序中，显示的文本在 chrome 中看起来不如 Firefox 粗体。

铬：

火狐：

这是我的 CSS：

body {
    font-size: 13px;
    color: #333;
    background: #f2f6f7;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}

我可以在代码中更改什么以在所有浏览器中获得相同的感觉吗？

Answer 1

您可以尝试设置text-rendering: optimizeLegibility; 值得注意的是，所有浏览器都有自己的渲染引擎，因此可能无法使其完美。

Answer 2

你可以在 Firefox 中试试这个：

-moz-osx-font-smoothing: grayscale;

或者，如果您不想要更细的字体，您可以在 Chrome 中禁用字体平滑：

-webkit-font-smoothing: unset;