0

使用しているフォントのベースラインを作成しようとしています。書体はサビオ。

以下の特定のスタイルは、Sabio Perpendicular です。

このフォントでベースラインを作成しようとしましたが、以下に示すように、ある程度成功しています。

下の画像は、12 ピクセルごとに表示される「ベースライン」で使用しているフォントを示しています。

私の質問は、見出しの 2 番目のセット、つまり (記事で) と言う見出しがベースラインから外れ始めているのはなぜですか? 私はそれらを article タグから外してみましたが、それでも同じ結果が得られました。

何が起こっているのかよくわかりませんが、これでうまくいくと思いました。

ピクセルから rems への変換に役立ついくつかの mixin には、あまり使用していません。

ここに私が使用している少ないコードがあります

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

ほとんどの場合、コンテナーから継承された追加のカスケード マージンまたはパディングです。

これをデバッグする最善の方法は、要素の効果的な CSS とビジュアル ボックス モデルを表示する Firebug または Chrome 開発者ツールを使用することです。

于 2013-01-22T06:19:04.990 に答える