CSS 如何防止不同浏览器以不同方式呈现字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30876894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent different browsers rendering fonts differently?
提问by Pav Sidhu
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:
苹果浏览器：
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.
我已经尝试使用在其他问题上找到的解决方案，尽管他们还没有解决这个问题。如何在所有主要浏览器中保持一致的字体样式？即 Chrome、Safari、Opera、Firefox 和 Internet Explorer。
Here is what I have tried.
这是我尝试过的。
-webkit-font-smoothing: antialiased;font-weight: 800;text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;font-weight: 800;text-rendering: optimizeLegibility;
回答by code and pixels
Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.
总的来说，浏览器具有不同的字体渲染引擎/方法。有关更多详细信息，我建议阅读this、this和/或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).
如果出于某种自虐的原因，像素完美比健全和可维护的代码更重要，您可以尝试旧的备用（图像中的文本，图像/文本替换）或通过 CSS 关闭子像素渲染（尽管不是所有浏览器支持它，文本可读性会降低）。
Hope that helps.
希望有帮助。
回答by Paul12_
A lot of the differences are more to do with the fact browsers add or omit different default weights / styles to fonts. To stop this happening make sure in your CSS you have font-weight: normaland font-style: normalin your @fontfacecode block.
许多差异更多地与浏览器为字体添加或省略不同的默认权重/样式这一事实有关。要阻止这种情况发生，请确保在您的 CSSfont-weight: normal和font-style: normal您的@fontface代码块中。
You then need to apply the necessary styles to the HTML elements.
然后，您需要将必要的样式应用到 HTML 元素。
So if I have a font called geo-lightI would do:
因此，如果我有一个名为的字体，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;
}
And then add the specific styles for each element that uses that font.
然后为使用该字体的每个元素添加特定样式。
/*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;
}
I hardly ever see this done on sites, and the pre-cursor to this is what is happening in your image. Those differences are not being caused by an anti-aliasing issue.
我几乎从未在网站上看到过这种情况，而这的前兆就是您的图像中发生的事情。这些差异不是由抗锯齿问题引起的。
This 1st and 3rd articles in the original answer are regarding a completely different problem and the middle article that is being linked to would mean the reverse effect happening in your image examples.
原始答案中的第 1 篇和第 3 篇文章是关于一个完全不同的问题，而链接到的中间文章将意味着在您的图像示例中发生相反的效果。
回答by Peter
The previous comment helped me a lot, thank you. I managed this way in wordpress and it works. Put this code with your font "YOUR-FONT"in to your CSS.
之前的评论对我帮助很大，谢谢。我在 wordpress 中以这种方式管理并且它有效。将此带有字体“YOUR-FONT”的代码放入CSS 中。
@font-face {
font-family: 'Conthrax';
src: url('/wp-content/uploads/fonts/conthrax-sb.eot');
src: url('/wp-content/uploads/fonts/conthrax-sb.eot') format('embedded-opentype'),
url('/wp-content/uploads/fonts/conthrax-sb-webfont.wofff') format('woff'),
url('/wp-content/uploads/fonts/conthrax-sb.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
