为字体创建基线

Question

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

下面的具体风格是Sabio Perpendicular。

我尝试使用这种字体创建一个基线，正如您在下面看到的那样，我已经有所成功。

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

我的问题是，为什么第二组标题，那些说（在文章中）的标题开始偏离基线？我尝试将它们带出文章标签，但仍然有同样的事情。

我无法弄清楚发生了什么，但我认为这样可行。

我使用较少的一些mixins来帮助我从像素转换为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和可视框模型。