在不同的Web浏览器中,粗体文本看起来非常不同

时间:2011-03-20 20:30:03

标签: css fonts cross-browser typography

我有两个浏览器都在Ubuntu 10中运行。

Firefox 4 RC和Google Chrome 10.两者都有非常不同的粗体文字表示。请看下面的截图 - Chrome顶部,Firefox下面

enter image description here

Windows和Mac OSx中的相同浏览器没有显示差异,或者至少是非常小的差异。

为了排除任何CSS不兼容性,我检查了应用的样式和字体粗细,大小,字母间距和行高的计算值。他们都匹配。

奇怪的文字(包括这一个)不是粗体看起来完全一样。

使用的字体是 Monotype Corsiva ,它作为网络字体附加。 其他字体没有此问题。

我的问题是网页浏览器如何生成粗体文字?为什么这取决于使用的字体以及如何解决它?不幸的是,使用其他字体不是一种选择。

编辑:这是根据要求应用于文本的CSS:

text-align: right;
font-size: 110%;
font-weight: bold;
font-style: normal;
white-space: nowrap;
font-family: "Monotype Corsiva","mntcrsweb",sans-serif;
letter-spacing: 0.02em;
line-height: 100%;
text-shadow: -0.1em -0.06em 0.2em #000000;

font-size: 180%;

direction: ltr;

font-size: 10px;

line-height: 125%;

3 个答案:

答案 0 :(得分:4)

粗体字体是单独的字体文件,不包含在主字体中(至少不适用于TTF和OTF格式)。

Monotype Corsiva没有大胆的变体,所以如果你试图强化它,操作系统和/或浏览器会试图伪造它,但结果会有所不同(但总是不太理想)。

简短的回答:不要这样做。

干杯,

托马斯

答案 1 :(得分:2)

只记得你问题的另一个可能原因。字体可以在字体内包含BOLD版本。一些浏览器和操作系统使用其他浏览器和其他操作系统生成大胆这可能是你的问题。字体可能有粗体或oppersite。我自己没有测试过,但这可能是问题所在。

替代Google等的一些开源/免费网页字体。

答案 2 :(得分:0)

如果你离开%和em单位会发生什么?使用“错误的px”代替?那么他们一致吗?我不是说你不应该使用%或em,但px单位是否会产生同样的问题?

如果确实如此,我认为是时候忘记任务的特定字体了。对我来说听起来很麻烦。

正如您所提到的,浏览器和操作系统版本以不同的方式呈现字体 - 例如。 Windows上的cleartype等等。但无论如何它们应该或多或少相似。

如果我在你的情况下,我会首先应用1 css样式,检查所有浏览器。然后应用下一个直到外观中断。调试从底部开始。 :O)