CSSでカスタムフォントの行の高さを修正
作業中の新しいWebアプリでカスタムフォントを使用すると、奇妙な問題が発生しています。
このカスタムフォント（FF DIN）には、自然に垂直な中心から外れた線の高さがあり、ボタンや入力などの要素の上部のスペースを補うために、パディングトップハックを強いられます。
例：緑色のフォント（Helvetica Neue）は正しく配置されています。ここで、使用するカスタムフォント（FF DIN）は垂直方向に中心から外れています：
CSSの中央揃えの問題を自然に修正し、フォントのベースラインの動作を強制する既知の方法はありますか？
ありがとうございました。
結局、私はこの答えの助けを借りて自分でフォントを手動で修正してしまいました：
ここでの問題は、行の高さではなく、グリフの垂直配置、特にテキストのベースラインの位置です。それはフォントデザイナーが決めたものです。デザイナーはグリフを描画し、それらをemスクエアに配置します。これは、高さがフォントの高さに等しい（またはフォントの高さと定義されている）概念的なデバイスです。特に、設計者は、一方のベースラインの下、もう一方の大文字の高さの上にどれだけのスペースがあるかを決定します。通常、これらのスペースは等しいか、ほぼ同じですが、同じである必要はありません。それらが大幅に異なる場合、フォントの使用目的はおそらく特殊であり、画像に示されているような使用法は含まれません。これは、フォントの選択を再検討する必要があることを示唆していますが、固定されていると仮定しましょう。
この問題に対処するにはいくつかの方法があります。文字の下のスペースが多すぎる場合は、line-heightを小さくすると小さくなりますが、上のスペースにも影響します。上部のパディングはある意味で役立ちますが、要素が占める全体の高さが増加します。 vertical-alignで遊ぶこともできますが、行ボックスの高さに影響します。
おそらく最も単純なアプローチは、問題が1行のテキストを扱っていると仮定して、相対位置を使用することです。相対配置では、レイアウトに影響を与えることなく、指定された方法でコンテンツを移動します。これにはラッパー、つまりテキストを含む要素が必要です。これにより、背景ではなくテキストのみを置き換えることができます。
次のデモでは、CandalというGoogleフォントを使用していますが、Candalは同様の問題を抱えていますが、方向が異なります。ベースラインが低すぎます。元の問題に対応するためのこのアプローチの変更は明白ですが、正確な変位量は経験的に（またはフォントインスペクターを使用してフォントファイルから抽出された情報から）決定する必要があります。当然、フォントサイズをピクセルまたはポイントで設定した場合でも、emユニットをここで使用する必要があります（フォントサイズがいつか変更されてもコードを変更する必要がないようにするため）。
<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>私も過去にその問題を抱えていました。ブラウザーが異なっても、行の高さが異なります。私はそれがwebfontジェネレーターを使用しているときに起こり、私の知る限り、異なる行の高さを使用することでのみ修正できると思います。
Fontsquirrelを試しましたか？結果が異なるいくつかのオプションがあります。
http://everythingfonts.com/font-face
Chromeでは、font-face宣言を使用している場合、HTMLでstyle = ""を呼び出すか、または単にCSSでのフォント宣言後の行の高さ。
Chromeは、カスタムフォントがレンダリングされるまで、行の高さを計算する方法を知らないだけだと思います。
これは私が最近遭遇したものです。何らかの理由で使用していたフォントのベースラインが揃わなかったため、パディングを追加する代わりに、下に揃えて行の高さを増やしました。
これは私が私の問題を解決した方法です、あなたがコードペンへのリンクを持っている場合、それがあなたのために働くか、または別の解決策がより良いかどうかを確認できます。
p {
vertical-align: text-bottom;
line-height: 1.5;
}