2012-01-17 7 views
5

font-faceでよくある問題です。ライン高さのベースラインをオフセットする方法は?

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase; 

enter image description here

問題は、私は、テキストを上下中央に期待するということです。しかし、そうではありません。線の高さの基線をオフセットする方法はありますか?実際にはline-heightを変更しないでください。

答えて

2

現象はフォントによって異なります。フォントの高さをどのように使用するかは、フォントデザイナーの判断に任せます。たとえば、Arialでは、ソリッドに設定すると、大文字の基本ラテン文字は垂直方向に中央に配置されますが、Verdanaでは、少し下に表示されます(下のスペースより少し上に表示されます)。

相対的な配置を使用して微調整できますが、追加のマークアップが必要です。 span設定のためのCSSと

<div><span>text</span></div> 

、ユーザのブラウザで使用されるフォントがあなたの期待と異なる場合

position: relative; 
top: 2px; 

これは厄介な影響を引き起こす可能性があり、言います。

font-style: 'book'の可能な影響は考えていませんでした。何が意味するのか分かりません。私が知っているCSSリソースはありません(font-styleの値は引用符で囲まれていないキーワードで、bookは入りません)。

+1

'font-style: 'book'はスタイル' book'を持つフォントファミリーメンバーを参照しています。相対的な位置付けについてのヒントをありがとう。問題は、例えば、Opera上では、フォントが期待通りに表示されることです。垂直にセンタリングされる。したがって、あなたのような修正を適用しても、ブラウザ間での互換性はありません。これはフォントの問題ではないかのようにも見えますか? – Gajus

関連する問題