8

私はこれに対する答えを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;
}
4

6 に答える 6

1

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

W3Cから:

フォント フォールバックが発生する状況では、フォールバック フォントは目的のフォント ファミリと同じ縦横比を共有しない場合があり、そのため読みにくくなります。font-size-adjust プロパティは、フォント フォールバックが発生したときにテキストの読みやすさを維持する方法です。これは、使用するフォントに関係なく x-height が同じになるように font-size を調整することによって行われます。

于 2013-08-16T14:58:03.260 に答える
0

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

http://fontforge.org/などのツールを使用して、自分でフォントを変更してみてください。ただし、これは簡単ではなく、試行錯誤が必要です。また、使用しているフォントのライセンスに違反している可能性もあります。

私のアドバイス: Web での使用に最適化されたフォントを選択してください。Typekit などから任意のフォントを取得すると、より一貫した結果が得られるはずです。

于 2013-08-19T14:32:24.343 に答える