css - (ほぼ) 同じ OS の同じブラウザでテキストの位置が異なる

Question

私は本当にここで困惑しています。私が持っているのは、ページのメインヘッダーであるテキストを含む長方形として様式化された div です。関連するコードは次のとおりです。

HTML:

<div id="rectangle">
<h1>SIN</h1>
</div>

CSS:

h1 {
        text-align:right
        font-family:Buenard;
        font-size:120px;
        font-weight:normal;
        color:#FFFFFF;
        position:absolute;
        width:98%;
        line-height:109px;
        border:1px solid white; /*for debugging purposes*/
}

#rectangle {
        position:relative;
        width:237px;
        height:109px;
        background:#6F0000;
        margin-top:40px;
}

私を夢中にさせている問題は、Home Premium と Enterprise の 2 台の異なる Windows 7 コンピューターを使用していて、同じバージョンの Chrome に対して異なる結果が得られることです (Firefox にも矛盾があります)。Enterprise コンピューターでは、テキストはボックスの下部に近くなり、Home Premium コンピューターでは、テキストは上部に近くなります。

Chrome や Firefox などのブラウザは OS システム設定をフォントに使用することがあることを読んだことを覚えていますが、何が原因で、どのように修正するのかわかりません。最終的には、テキストを垂直方向に中央揃えにし、長方形の内側で右揃えにする必要があります。これは、コンピューターごとに実行できますが、両方を同時に実行することはできません。

これを試した Mac OSX コンピュータは、Windows Enterprise コンピュータと同じ動作をしたと思います (ただし、完全にはわかりません)。したがって、これは私のパーソナル コンピュータの設定にすぎない可能性があります。

画像を使用してこの問題を解決できることはわかっていますが (そうかもしれません)、ここで何が起こっているのか知りたいです。

編集：他のコンピューターで試してみましたが、問題はまだ存在します。Web フォントは、以下の方法で参照されます。他のアイデアはありますか？私の傾向は、それがシステム設定の問題であるということですが、それがどのような設定になるのかわかりません。