Question

使用粗体Arial字体时，左侧会出现意外边距（仅约1 px）。

HTML：

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

CSS：

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

它适用于基于Mac OS X的浏览器，但不适用于Windows。

是否有人遇到类似的问题？

Screenshot http://oi61.tinypic.com/207qfqd.jpg

Answer 1

不幸的是它不可避免。

http://jsfiddle.net/chrissp26/be2EW/3/

这最常见于较大尺寸，如上面的小提琴所示。不幸的是，您的选择非常有限。你可以尝试一些字母间距的黑客，但这将是一个非常复杂的解决方案。

显然，最好的做法是使用更统一的字体。

<b>A</b><br />
<b>B</b><br />
<b>C</b><br />
<b>D</b><br />
<b>E</b><br />
<b>F</b><br />
<b>G</b><br />
<b>H</b><br />
<b>I</b><br />
<b>J</b><br />
<b>K</b><br />
<b>L</b><br />
<b>M</b><br />
<b>N</b><br />
<b>O</b><br />
<b>P</b><br />
<b>Q</b><br />
<b>R</b><br />
<b>S</b><br />
<b>T</b><br />
<b>U</b><br />
<b>V</b><br />
<b>W</b><br />
<b>X</b><br />
<b>Y</b><br />
<b>Z</b>

Answer 2

它根本不是边缘，或者任何依赖于CSS的东西。例如，Arial中“U”左侧的间距是字形本身的一部分。这可以在字形编辑器中看到：字形出现在其边界框内，以便在其两侧都有空白区域。这种间距通常会阻止字形相互接触。在“S”中，效果较小，左边似乎有一些空间的原因主要是字母的形状。

在硬核排版中，有时会通过微调字母的水平位置来处理此类问题。在CSS中做这样的事情是可能的，但是笨拙而且不常见。例如，您可以在元素中包装一行文本，并在其上设置以下声明：

position: relative; left: -1px;

对于标题等显示文本，这有时可能是合理的。

Answer 3

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

您可以尝试的解决方案：

使用CSS重新定位文字
更改为其他字体
删除粗体
创建静态图片（不是最佳选择）

另外，您可以查看CSS3字体模块：http://www.w3.org/TR/css3-fonts/

请注意，每个浏览器都不支持font-stretch，font-size-adjust，letter-spacing，text-rendering等标记。

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

3 个答案: