css - 使用粗体的 Arial 字体的意外边距

Question

在使用粗体 Arial 字体时，左侧会出现意想不到的边距(仅约 1 像素)。

参见示例:http://jsfiddle.net/be2EW/1/

HTML:

<b>ABC</b> <br />
<b>STU</b>

CSS:

body {
    font-family: Arial;
    font-size: 80%;
}

它在基于 Mac OS X 的浏览器上运行良好，但在 Windows 上运行不佳。

有没有人遇到过类似的问题？

Answer 1

如前所述，这与 CSS 无关，而是与字体渲染有关。不同的浏览器呈现不同的字体。即使是相同的浏览器也会在不同的平台上以不同的方式呈现某种字体，正如您在比较基于 Mac OS X 的浏览器与 Windows 时提到的那样。

您可以尝试的解决方案:

• 使用 CSS 重新定位文本
• 换一种不同的字体
• 去掉粗体
• 创建静态图像(不是最佳选择)

或者您可以查看 CSS3 字体模块:http://www.w3.org/TR/css3-fonts/

请记住 font-stretch、font-size-adjust、letter-spacing、text-并非所有浏览器都支持呈现。