相同的字体除了它的重量似乎不同的不同的浏览器 [英] Same font except its weight seems different on different browsers

问题描述

文字在Chrome中正确显示。我希望它在所有浏览器中以这种方式显示。我该如何做？

The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?

Chrome：

Chrome:

UPDATE：在Safari中修复 -webkit-font-smoothing：antialiased;

UPDATE: Fixed in Safari with -webkit-font-smoothing: antialiased;

Firefox：

Firefox:

这是CSS：

font-family: Georgia;
font-weight: normal;
font-size: 16pt;
color: #444444;
-webkit-font-smoothing: antialiased;

和一个小提琴： http://jsfiddle.net/jnxQ8/1/

推荐答案

Be确保所有浏览器的字体都相同。如果是相同的字体，则问题无解决方案使用跨浏览器CSS 。

Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.

浏览器有自己的字体渲染引擎，他们都不同。

Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.

UPDATE ：对于那些不了解浏览器和操作系统字体呈现差异的用户，阅读此和这个。

UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.

但是，大多数人甚至没有注意到差别，用户也接受。

However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:

1. 尝试通过CSS关闭子像素渲染（不是所有浏览器都允许


2. 使用图片（资源要求很高，难以维护）


3. 更换Flash并且不适用于iOS）

---

UPDATE ：我检查了示例页面。通过文本呈现调整字距有助于：

---

UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:

text-rendering: optimizeLegibility; 

更多参考资料：

1. 字体渲染的一部分由 字体平滑 （如上所述），另一部分是 text-渲染 。调整这些属性可能会有所帮助，因为它们的默认值在不同浏览器中不一样。


2. 对于Chrome，如果仍然无法显示确定，请尝试此text-shadow hack 。它应该改善您的Chrome字体呈现，特别是在Windows。然而，文本阴影将疯狂在Windows XP下。小心。

1. Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
2. For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.

这篇关于相同的字体除了它的重量似乎不同的不同的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！