如何防止不同浏览器以不同方式呈现字体? [英] How to prevent different browsers rendering fonts differently?
问题描述
我在尝试在所有浏览器中保持一致的字体样式时遇到问题.如下图所示，safari 的字体渲染系统使得字体粗细小于 chrome 的字体粗细.
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、Safari、Opera、Firefox 和 Internet Explorer.
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.
这是我尝试过的.
-webkit-font-smoothing:抗锯齿；
font-weight: 800;
text-rendering: optimizeLegibility;
推荐答案
总的来说，浏览器具有不同的字体渲染引擎/方法.有关更多详细信息，我建议阅读this，
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.
如果出于某种自虐的原因，像素完美比健全和可维护的代码更重要，您可以尝试旧的备用(图像中的文本，图像/文本替换)或通过 CSS 关闭子像素渲染(尽管不是所有浏览器都支持，文字可读性会变差).
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).
希望有所帮助.
这篇关于如何防止不同浏览器以不同方式呈现字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
