加粗 Lucida Sans 时 CSS 中出现奇怪的文本对齐问题

Question

我正在创建一些 HTML/CSS 来显示一个键，但如果标题的文本与项目的文本相比，最终会出现奇怪的垂直错位。

经过大量实验，我发现问题似乎只在文本加粗时才会出现，而且只有在使用 Lucida Sans 字体时才会出现。

你可以在这里看到这个问题的演示......http://jsfiddle.net/Ufa69/

HTML...

<div class="key">
<div class="t1">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="key">
<div class="t2">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

CSS...

body {
    font-family: "Lucida Grande","Lucida Sans","Arial",sans-serif;
}

.key {
    padding: 2px;
    font-size: 10px;
    overflow: hidden;
    border: 1px solid #666666;
    background: #eeeeee;
    margin-bottom: 4px;
}

.t1, .t2 {
    float: left;
    margin-right: 4px;
}

.t2 {
    font-weight: bold;
}

.item {
    float: left;
    margin-right: 4px;
}

在演示中，您会看到文本在第一个 div 中正确对齐，但在第二个 div 中未对齐。两者的唯一区别是第二个使用了粗体。

您可能会想，“所以，使用不同的字体”。

但有一个问题 - Lucida Sans 是 jQuery UI 的默认字体。

所以我希望一些聪明的 CSS-guru 可以找到另一种方法来让这个文本在粗体时表现正确。

（我在 Chrome、Firefox 和 Safari 的 Windows 上会出现这个问题，但在 IE 上不会出现）

Answer 1

它们没有对齐，因为粗体和普通文本分配空间的方式不同，与普通文本相比，粗体增加了font-size。

我的解决方案是将字体大小增加到普通文本，使其仍然是普通文本，但与粗体相同。请参阅下面我对小提琴的更新。

.t1{
    font-size:12px;

}

http://jsfiddle.net/Ufa69/1/

注意：有很多选项可以让粗体和普通文本正确对齐。您可以使用固定宽度的表格 td 或 div。

Answer 2

也许我不适合这种事情。但我没有看到错位的问题，这里似乎真的是一致的。 (Chrome v31)

发生的事情：

• 为了使字体加粗，在字体字母中添加了几个像素来实现效果。 显然，它在小尺寸的文本中变得更加明显。

• 每个浏览器，甚至版本，都会以不同的方式呈现字体。

• 每个文本、每一行文本都有自己的字体大小和line-height。默认情况下，line-height 是自动的，会挤压到内容的高度。所有这些行为都称为line box。 在文本中，font-size: 10px、line-height 会高几个像素。 正如您将增加line-height 的大小一样，内容将获得更多的空间来向上、向下、中间等，如属性中所定义：vertical-align

• 随着文本大小的增加，它也会致命地增加行高。

---

所以，我有很多选择可以弥补这一点。几乎所有的，通过改变字体大小、行高、垂直对齐、边距......很难达到严格成功的结果。

一个特别常用且我喜欢的方法就是将粗体文本的大小减小 1 或 2 像素。

.t2 {
    font-size: 9px;
    font-weight: bold;
}

您还可以限制包装容器的height 和line-height 以使其更加平等。

See fiddle 确认您喜欢这个结果。

Answer 3

不错..

我看到 line-height 与您的 .t2 (11px) 和 .item (14px) 不同，但即使是 firebug 也没有提及“为什么”或继承。

使用.key{line-height:14px;} 将行高固定为 14px。

[编辑] 在看到它的实际操作后，我不明白为什么行高没有从 .key 类元素继承给他们的孩子<div>

我fiddled here 'line-height' 的解决方案相同，但适用于子 div。

.key,.key div{line-height:14px;}

Answer 4

某些浏览器显然使用奇数框高度计算。即使在像

这样的简单设置中也可以看到这一点

<style>* { font-family: Lucida Sans }</style>
<p>foo<p style="font-weight: bold">foo

在 Chrome 开发工具中检查显示第一个 p 元素的高度为 15 像素，第二个 p 元素的高度为 14 像素。这没有什么意义；我们可以预期粗体字体需要 more 高度，但几乎不会更少。请注意，高度计算取决于浏览器，不一定直接使用 line-height 值。

在您的情况下，最好的解决方法可能是使用一些合乎逻辑的table 标记而不是浮动标记。在表格中，即使方框高度不同，线条通常也会对齐。

Answer 5

结论：小尺寸的 Lucida Sans 粗体渲染不正确（在某些系统上）。

在对各种选项进行大量测试后，例如设置行高、使用表格、尝试不同的尺寸和垂直对齐方式以及进行测量，我最终得出的结论是，问题仅在于小尺寸的渲染Lucida Sans 粗体。

如果您创建两个带边框的 div，一个使用 10 像素的常规 Lucida Sans，另一个使用粗体版本，您可以看到粗体的那个明显更短（高度）。

当与顶部对齐时，粗体字体比正​​常字体高几个像素。

与底部对齐，比正常低几个像素。

即使对齐到中间，它仍然比正常高一个像素。

坏消息：

• Lucida Sans 是 jQuery UI 的默认字体，通常是一种非常流行的字体，这意味着这会影响很多网页。
• 跨浏览器不一致，因此需要调整 它适用于 Chrome 可能会在 IE 上被淘汰。

好消息：

• 它只发生在字体的小版本上。我发现任何 13 像素或更大的东西似乎都能正确渲染。
• 在这些小尺寸中，您可以轻松替换“Arial”、“Helvetica”或类似名称，而不会引起任何人注意。

感谢所有提出想法的人，例如使用表格、行高等。最后，尽管我认为唯一明智的选择是避免使用小版本的 Lucida Sans。您仍然可以在大部分网页中使用它，只需用更可靠的类似字体替换小于 13 像素的字体即可。