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

Question

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

苹果浏览器:

铬:

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

这是我尝试过的.

1. -webkit-font-smoothing: antialiased;

2. font-weight: 800;

3. text-rendering: optimizeLegibility;

Answer 1

总的来说,浏览器具有不同的字体渲染引擎/方法.有关详细信息,我建议您阅读本,本和/或此内容.

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

如果出于某些自虐原因,像素完美比理智和可维护代码更重要,您可以尝试旧的标准(图像中文本,图像/文本替换)或通过CSS关闭子像素渲染(尽管不是所有浏览器支持它,文本将不太可读).

希望有所帮助.

Answer 2

许多差异更多地与浏览器添加或省略不同的默认字体粗细/样式有关。要阻止这种情况发生，请确保您的 CSSfont-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;
}

我几乎没有在网站上看到过这样做，而这的前兆就是你的图像中发生的事情。这些差异不是由抗锯齿问题引起的。

原始答案中的第一篇和第三篇文章涉及一个完全不同的问题，链接到的中间文章意味着您的图像示例中会发生相反的效果。