粗体文本在不同的网络浏览器中看起来非常不同答案

【问题标题】：Bold text looks very different in different web browsers粗体文本在不同的网络浏览器中看起来非常不同
【发布时间】：2011-07-19 06:48:14
【问题描述】：

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

Firefox 4 RC 和 Google Chrome 10。两者都有非常不同的粗体文本表示。请看下面的截图 - 上面是 Chrome，下面是 Firefox

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%;

【问题讨论】：

这就是浏览器所做的 - 总会有一些差异，尤其是。在文本渲染中 - 接受它并继续前进。 ;)
如果删除text-shadow 规则有什么变化吗？
不 :( 当然除了文字阴影消失了，文字保持不变。
@ToonMariner 我将此文本置于静态图片的中心。该设置允许一些不一致，但它看起来一点也不好。差别很大。
@avok00 只是停留在...事实上，大多数浏览器之间的文本呈现方式至少存在细微差别。你有我们可以查看的链接吗？

标签： css fonts cross-browser typography

【解决方案1】：

粗体字体是一个单独的字体文件，不包含在主字体中（至少，不用于 TTF 和 OTF 格式）。

Monotype Corsiva 没有加粗变体，因此如果您尝试对其进行加粗，操作系统和/或浏览器会尝试伪造它，结果会有所不同（但总是不太理想）。

简短回答：不要那样做。

干杯，

托马斯

【讨论】：

【解决方案2】：

刚刚想起您的问题的另一个可能原因。字体可以在字体内包含粗体版本。一些浏览器和操作系统使用这个其他的会自己生成粗体。这可能是你的问题。字体可能有粗体或反面。没有自己测试过，但这可能是问题所在。

谷歌等的一些开源/免费网络字体的替代选择。

【讨论】：

这是我的第一个想法。不幸的是，免费的字体质量不是最好的，我买不起。也许我会删除粗体 - 问题解决了:)
你看过这个页面吗：google.com/webfonts ??他们是免费的

【解决方案3】：

如果你离开 % 和 em 单位会发生什么？改用“故障像素”？他们对齐了吗？我不是说你不应该使用 % 或 em，但是 px 单位会产生同样的问题吗？

如果是这样，我认为是时候忘记该任务的特定字体了。对我来说听起来很糟糕。

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

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

【讨论】：

问题不在 em 和 % 我试过像素。问题可能在字体中。