我正在尝试为我正在使用的字体创建基线。字体是萨比奥。
下面的具体样式是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 );
}