如何防止不同浏览器以不同方式呈现字体

Question

我在尝试在所有浏览器中保持常量字体样式时遇到问题。如下所示，safari的字体渲染系统使字体重量小于chrome的字体重量。

的 Safari浏览器：

铬：

我尝试过使用其他问题上找到的解决方案，尽管他们还没有解决这个问题。如何在所有主流浏览器中保持恒定的字体样式？那就是Chrome，Safari，Opera，Firefox和Internet Explorer。

以下是我的尝试。

1. -webkit-font-smoothing: antialiased;

2. font-weight: 800;

3. text-rendering: optimizeLegibility;

Answer 1

总的来说，浏览器有不同的字体渲染引擎/方法。有关详细信息，建议您阅读this，this和/或this。

老实说，对普通用户来说，差异并不是那么明显，而且在大多数情况下，像素完美的跨浏览器显示任何东西都已经被作为印刷世界的后遗症长期放弃了。

如果出于某种自虐原因，像素完美比理智和可维护代码更重要，您可以尝试旧的标准（图像中文本，图像/文本替换）或通过CSS关闭子像素渲染（尽管并非所有浏览器都支持它，并且文本的可读性会降低。）

希望有所帮助。

Answer 2

很多不同之处在于浏览器为字体添加或省略不同的默认权重/样式。要阻止这种情况发生，请确保在您的font-weight: normal代码块中有font-style: normal和@fontface。

然后，您需要将必要的样式应用于HTML元素。

因此，如果我有一个名为geo-light的字体，我会这样做：

@font-face {font-family: 'geo-light';
    src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
}

然后为使用该字体的每个元素添加特定样式。

/*SET STYLES ON ELEMENTS*/
h1, h2, h3, h3 > a, p, li {
    font-family: 'geo-light', sans-serif;
    font-weight: normal;
    font-style: normal; 
    text-decoration: none;
}

我几乎没有在网站上看到过这种情况，并且前面的光标是图像中发生的事情。这些差异不是由抗锯齿问题引起的。

原始答案中的第1和第3篇文章是关于一个完全不同的问题，而正在链接的中间文章意味着图像示例中发生相反的效果。

Answer 3

以前的评论对我很有帮助，谢谢。我在wordpress中以这种方式进行了管理，并且有效。将此代码和字体“ YOUR-FONT” 放入CSS。

@font-face {
    font-family: 'Conthrax';
    src: url('/wp-content/uploads/fonts/conthrax-sb.eot');
    src: url('/wp-content/uploads/fonts/conthrax-sb.eot') format('embedded-opentype'),
    url('/wp-content/uploads/fonts/conthrax-sb-webfont.wofff') format('woff'),
    url('/wp-content/uploads/fonts/conthrax-sb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; 
}