html - 为字体创建基线

Question

我正在尝试为我正在使用的字体创建一个基线。字体是 Sabio。

下面的具体样式是Sabio Perpendicular。

我尝试使用这种字体创建基线，正如您在下面看到的，我取得了一定的成功。

下图显示了我使用的字体，每 12 个像素显示一次“基线”。

我的问题是，为什么第二组标题(在文章中)开始偏离基线？我尝试将它们从文章标签中取出，但仍然得到同样的结果。

我真的不知道发生了什么，但我认为这会奏效。

我正在使用 less 一些 mixin 来帮助我将像素转换为 rems。

这是我使用的更少的代码

html
{
     font-size : 10px;
}

h1
{
    .font-size( 3.2 ); /* 3.2rem or 32px */
    .line-height( 4.8 ); /* 4.8rem or 48px */
    .margin-top( 1.2 ); /* etc etc etc */
}

h2
{
    .font-size( 2.4 );
    .line-height( 3.6 );
    .margin-top( 0.9 );
}

h3
{
    .font-size( 1.9 );
    .line-height( 2.4 );
    .margin-top( 1.9 );
}

h4
{
    .font-size( 1.6 );
    .line-height( 2.4 );
    .margin-top( 1.3 );
}

h5
{
    .font-size( 1.4 );
    .line-height( 2.4 );
    .margin-top( 1.3 );
}

h6
{
    .font-size( 1.1 );
    .line-height( 2.4 );
    .margin-top( 1.3 );
}

Answer 1

很可能是从容器继承的一些额外的级联边距或填充。

最好的调试方法是使用 Firebug 或 Chrome 开发者工具，它们会向您展示元素的有效 CSS 和可视盒模型。