如何防止不同的浏览器渲染字体不同？ [英] How to prevent different browsers rendering fonts differently?

问题描述

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

Safari：

Chrome：

我已尝试使用在其他问题上找到的解决方案，虽然他们没有解决这个问题。如何在所有主要浏览器中保持不变的字体样式？这是Chrome，Safari，Opera，Firefox和Internet Explorer。

这是我试过的。

1. -webkit-font-smoothing：antialiased;




2. font-weight：800;




3. text-rendering：optimizeLegibility;

解决方案

浏览器，总的来说，有不同的字体渲染引擎/方法。有关详情，我建议您阅读此，这，和/或这个。

老实说，对于普通用户来说，差别不是那么明显，大部分是像素完美的跨浏览器显示的任何东西已被长期抛弃为打印世界的后果。

如果对于一些自虐的原因，像素完美比健全和可维护的代码更重要，你可以尝试旧的standy-bys（text-in-images，image /文本替换）或通过CSS关闭子像素渲染（虽然不是所有浏览器都支持它，并且文本的可读性较差）。

希望有帮助。

I have an issue with trying to maintain a constant font style across all browsers. As seen below, safari's font rendering system makes the font weight smaller than the font weight of chrome's.

Safari:

Chrome:

I've tried using the solutions found on other questions though they have not solved this issue. How can I maintain a constant font style across all the major browsers? That is Chrome, Safari, Opera, Firefox and Internet Explorer.

Here is what I have tried.

1. -webkit-font-smoothing: antialiased;

2. font-weight: 800;

3. text-rendering: optimizeLegibility;

解决方案

Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.

Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

Hope that helps.

这篇关于如何防止不同的浏览器渲染字体不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！