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

Question

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

Safari :

Chrome :

我已经尝试使用在其他问题上找到的解决方案，但它们并没有解决这个问题。如何在所有主要浏览器中保持一致的字体样式？即 Chrome、Safari、Opera、Firefox 和 Internet Explorer。

这是我尝试过的。

1. -webkit-font-smoothing:抗锯齿；

2. 字体粗细:800;

3. 文本渲染:优化易读性；

Answer 1

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

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

如果出于某种受虐狂的原因，像素完美比完整性和可维护代码更重要，您可以尝试旧的备用方法(图像中的文本、图像/文本替换)或通过 CSS 关闭子像素渲染(尽管并非所有浏览器都支持它，并且文本的可读性会降低)。

希望对您有所帮助。