如何防止不同的浏览器呈现不同的字体？

我试图在所有浏览器中保持不变的字体样式。如下所示，safari的字体渲染系统使得字体重量小于chrome的字体重量。如何防止不同的浏览器呈现不同的字体？

Safari浏览器： Safari

铬： Chrome

我已经使用上的其他问题找到了解决方案，但他们还没有解决这个问题尝试。我如何在所有主流浏览器中保持不变的字体风格？那就是Chrome，Safari，Opera，Firefox和Internet Explorer。

这是我试过的。

-webkit-font-smoothing: antialiased;
font-weight: 800;
text-rendering: optimizeLegibility;

2015-06-16 Pav Sidhu

我也很好奇。像“webkit-font-smoothing”这样的东西是否给它更多的定义外观？我知道它与不同浏览器和操作系统的字体渲染引擎不同（如果我正确记得，Chrome不使用默认设置）。我不认为有可能使这一点一致（除了使用诸如'cufon'之类的东西），但我很有兴趣知道。 – somethinghere

字体渲染真的很奇怪，我发现前缀将帮助一吨，以及更大的字体家族的倒退。编辑细字体我发现使用'-webkit-font-smoothing：antialiased;' –

请同时显示一些代码：这是一个自定义Web字体，你用什么CSS来强制使用相同样式你可以，等等？ –

浏览器，总的来说，具有不同的字体呈现引擎/方法。有关更多详细信息，我建议您阅读this,this和/或this。

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

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

希望有所帮助。

来源

2015-06-16 21:24:13 htmlmonkey

很多差异与浏览器添加或忽略字体的不同默认权重/样式有关。要停止这种情况发生，请确保在您的CSS代码块中有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篇文章涉及完全不同的问题，而正在链接的中间文章将意味着图像示例中会出现相反的效果。

来源

2018-01-21 01:56:56

如何防止不同的浏览器呈现不同的字体？

回答

相关问题