WindowsとMac OS Xで行の高さに@フォントフェイスの違いがあるのはなぜですか？

Question

私はこれで1時間は答えられませんでした。

"line-height" CSSプロパティを使用して、ボックス内にテキストを垂直方向にセンタリングしています。これは標準の安全なフォントでうまく動作していますが、Windows上での "@ font-face" ""フォント埋め込みに対してもうまく動作します。

ただし、Macでは "@ font-face"を使用してこのセンタリングに問題があります。参照：http://cl.ly/QBlE/o

私はこれをどうすればよいか分かりません。これを修正してMac用の異なる線高を使用する唯一の方法です。しかし、私が知る限り、これはJavaScriptやサーバー側のプログラミングがなければ不可能であり、私にとっては適切な解決策ではないようです。

例（上部の青色のボックス）：

#header .login { 
    text-decoration:none; 
    margin:11px 9px 0 9px; 
    float:right; 
    font-size:11px; 
    color:#fff; 
    background:url(../img/header-login.png); 
    width:118px; 
    height:26px; 
    line-height:26px; 
    padding:0 0 0 10px; 
    text-transform:uppercase; 
    font-family: 'Helvetica55', Sans-Serif; 
} 

Answer 1

代わりに異なる行の高さを使用する、autoの値とfont-size-adjustプロパティを使用してみてください。 W3Cから

：

フォントフォールバックが発生した状況では、代替フォントが所望のフォントファミリと同じアスペクト比を共有しないことがあり、したがって、より少ない可読現れます。 font-size-adjustプロパティは、フォントフォールバックが発生したときのテキストの可読性を保持する方法です。これは、使用されるフォントに関係なくx-heightが同じになるようにfont-sizeを調整することで行います。

Answer 2

まず、行の高さをpxからemに設定してみます。

これが機能しない場合は、ブラウザごとに異なるデフォルトのスタイルが原因である可能性があります。それらのデフォルトのスタイルはあなたのスタイルを乱している可能性があります。ですからあなたのページにreset.cssを使ってみてください。

Answer 3

問題はおそらく、使用されているフォントにあります。各フォントには独自の指標があり、適切に最適化されていない場合は、プラットフォームごとに異なる場合があります。詳細については、http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/を参照してください。

http://fontforge.org/のようなツールを使用して、自分でフォントを変更することができます。これは簡単ではないし、試行錯誤して正しい結果を得ることができます。また、使用しているフォントのライセンスに違反する可能性があります。

私のアドバイス：ウェブ上での使用がより最適化されたフォントを選択してください。 Typekitなどのフォントを持っていれば、より一貫した結果が得られるはずです。

Answer 4

おそらく「垂直整列：」助けて、

がこの違いを説明します。このfiddle

を確認してください、私はすべてのブラウザは、私が作成した別のデフォルト値、ここで

を持っていると思う4

値が変更された場合は、

の値を変更してください。 0は左から

ボタンで画像を使用しているとして、画像を確認してください、これは画像をレンダリングします0 0 すなわちbackground:url(../img/header-login.png) no-repeat 0 0;

で設定され、画像がない場合は、idnetify役立ちます0トップ問題が解決しない場合は、適切に生成された。..

あなたが本当にフォントでピクセルをドロップすると、EMSを使用して開始する必要があり、マルチブラウザおよびマルチプラットフォームのウェブサイトのための私の経験から...

Answer 5

を返信してください。

はここで役に立つconvertionテーブルツールです：

http://pxtoem.com/

が、それはまだ、EMを使用して発生した場合、私に教えてください。また、異なるフォントの動作が異なり、デフォルト（基本）サイズも異なる可能性があります。それがまったく同じサイズであることを確認したい場合は、 'em'を使用してappartすると、openTypeフォントを使用してCSSに埋め込む必要があります。画面やブラウザでフォントとサイズがまったく同じです。

Answer 6

オペレーティングシステムによって、フォントが異なる方法でレンダリングされることがあります。 1つは下から始めることができ、他のアルゴリズムは異なるアルゴリズムで先頭から始めることができます。問題がCSSの場合は、別の種類のフォントでは解決されませんでした。

私はあなたのものに別の質問の似を見つけ、それはあなたの状況のた​​めに働く場合は、次のことが確認できます。 Mac vs. Windows Browser Font Height Rendering Issue