粗体文本在不同的网络浏览器中看起来非常不同
我有两个浏览器都在 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%;
I have two browsers both running in Ubuntu 10.
Firefox 4 RC and Google Chrome 10. Both have very different representation of bold text. Please, see screenshot below - Chrome on top, Firefox below
Same browsers in Windows and in Mac OSx show no differences or at least very minor ones.
To rule out any CSS incompatibilities, I checked both styles applied and calculated values for font-weight, size, letter spacing and line height. They all match.
Strange enough text (including this one) that is not bold look exactly the same.
The font used is Monotype Corsiva, it is attached as web font. Other fonts do not have this problem.
My question is how do web browsers generate bold text? Why is that dependent on font used and how to work around it? Using other font is not an option, unfortunately.
EDIT: This is the CSS that apply to the text as requested:
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%;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
粗体字体将是一个单独的字体文件，不包含在主字体中（至少不包括 TTF 和 OTF 格式）。
Monotype Corsiva 没有粗体变体，因此如果您尝试将其加粗，操作系统和/或浏览器会尝试伪造它，从而产生不同的（但总是不太理想）结果。
简短的回答：不要这样做。
干杯，
托马斯
A bold font would be a separate font file, not included in the main font (at least, not for TTF and OTF formats).
Monotype Corsiva does not have a bold variant, so if you try to embolden it, the operating system and/or the browser tries to fake it, with varying (but always less than ideal) results.
Short answer: don't do that.
Cheers,
Thomas
刚刚想起了您的问题的另一个可能原因。字体可以在字体中包含粗体版本。一些浏览器和操作系统使用它，其他浏览器和操作系统自己生成粗体。这可能是你的问题。字体可能有粗体或相反。自己没有测试过，但这可能是问题所在。
另一种选择是使用谷歌等的一些开源/免费网络字体。
Just remembered another possible reason for your problem. Fonts can include a BOLD version inside the font. Some browsers and OS uses this others generates the bold themselfs. This could be your problem here. The font might have the bold or oppersite. Havent tested it myself, but that could be the problem.
Alternative go for some of the opensource/free webfonts from Google etc.
如果放弃 % 和 em 单位会发生什么？使用“错误的像素”代替？那么他们对齐了吗？我并不是说你不应该使用 % 或 em，但是 px 单位会产生同样的问题吗？
如果确实如此，我认为是时候忘记该任务的特定字体了。对我来说听起来很麻烦。
正如您所提到的，浏览器和操作系统版本呈现的字体不同 - 例如。 Windows 上的cleartype 等。但无论如何它们应该或多或少相似。
如果我处于你的情况，我会首先应用 1 css 样式，检查所有浏览器。然后应用下一个，直到外观破裂。调试从底层开始。 :o)
what happends if you go away from % and em units? use the "faulty px" instead? do they align then? I dont say that you shouldn't use % or em, but does px units produce the same problem?
If it does, I think its time to forget that perticular font for the task. Sounds buggy to me.
Ofcause as you mention, browsers and OS versions renders fonts differently - eg. cleartype on Windows etc. But they ought to be more or less alike anyways.
If I were in your situation, I would first apply 1 css style, check on all browsers. Then apply the next until the look breaks. Debugging starts from bottom. :o)