12

当我有两行不同字体大小的文本时，它们会重叠。看这个例子：http: //jsfiddle.net/3WcMG/1/

所有的 'j' 和 'g' 都隐藏了第二行的 to。它适用于所有主要字体。

为什么它会那样做？我能做些什么来避免这种情况？

编辑：我知道“em”是什么意思，我知道如何使用边距，我知道如何增加行高，我知道 JSFiddle 的重置 css 的效果是什么，这不是我的问题。我的问题是：为什么“j”的底部不在文本框内？看起来如果我在第二行放置负边距顶部（除了我没有，默认情况下看起来像这样）。有没有办法让字体适合盒子。

EDIT2：似乎是浏览器问题！我在 Mac 上使用 chrome 21.0，我看到： 截屏

4

4 回答 4

20

1em 等于字体大小中像素数的 1 倍。所以如果你font-size是 60px，1em = 60px。如果是 14px，1em = 14px，以此类推。将 设置line-height为 1em 使其等于像素数的 1 倍。

可能会有一些混淆，因为用户代理样式表设置的默认行高通常在 1.5em 左右，所以 12pxfont-size会导致 18px line-height。

em unit
等于使用它的元素的 'font-size' 属性的计算值

来源：http
://www.w3.org/TR/css3-values/#font-relative-lengths 另见：http ://www.w3.org/TR/CSS21/syndata.html#length-units

基于此，您的原始示例正是我希望看到的。作为参考，这是我在 Chrome 中看到的内容：

在此处输入图像描述

您的第一行是 60px 高，但第二行的计算值（W3 的术语）是 14px（由应用于它的类决定）。两者都有line-height1em。因此，line-heights它们分别是 60px 和 14px。由于这与字体大小相同，因此两条线接触（这可能因字体而异）。

如果您看到重叠的行为，那是另一个问题。

要更改行为，您可以使用不同的行高、填充、边距等。作为旁注，尽管在旧版浏览器中缺乏支持，但rem 单位可能更直观。

有关 CSS 单元的概述，请参阅：http ://css-tricks.com/css-font-size/

字体未与框的边缘对齐

更新的问题/问题

在此处输入图像描述

关于更新的问题，请参阅：http ://www.w3.org/TR/css3-fonts/#propdef-font-size其中指出：

请注意，某些字形可能会在其 EM 框外流血。

这在不同程度上发生在我尝试过的不同字体中（有些在 X/Y 上都流血，有些在一个方向上，有些根本没有）。

我不确定是否有任何方法可以改变这种行为，尤其是因为每个浏览器可能使用不同的抗锯齿算法，这可能会稍微改变字符的边缘。

我认为 line-box-contain: glyph可能是相关的，但我只在编辑草稿中看到它，我确信浏览器支持不存在/不一致。

http://dev.w3.org/csswg/css3-linebox/#line-box-contain

于 2012-08-08T04:46:31.350 回答
1

增加 CSS 中的行高

行高：2em；（从 1 到 2em）

在p元素中。

于 2012-08-08T04:34:10.490 回答
0

你可以给你的“测试”类 line-height 或 margin-top 任何你觉得舒服的东西。

.test{
    font-size: 14px;
    line-height:18px;
}
于 2012-08-08T05:34:33.253 回答
0

默认行高是相对大小，例如 ap 中字体大小的 150%。如果您使用 em 或 % 更改行高，浏览器会将其解释为“em/% 与字体大小相比”。

http://jsfiddle.net/P7LaP/

<div class="small">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="large">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>

该示例具有三组三个 p 标签，具有正常高度、短和高。而三组是字体大小。

p {
    color: ffffff;
    background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }

我希望这有帮助。我不确定您到底要做什么，但看起来您应该从样式表中删除 line-height 行。

于 2014-05-11T14:13:58.070 回答