0

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

下面的具体样式是Sabio Perpendicular。

我试图用这种字体创建一个基线,正如你在下面看到的,我已经取得了一些成功。

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

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

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

对于一些帮助我将像素转换为 rems 的 mixin,我使用 less。

这是我正在使用的较少代码

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 );
}

字体基线

4

1 回答 1

0

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

调试此问题的最佳方法是使用 Firebug 或 Chrome 开发工具,它们将向您展示元素的有效 CSS 和可视框模型。

于 2013-01-22T06:19:04.990 回答