3

ボックス内のいくつかのシンボルを垂直方向に中央揃えにしようとしています。しかし、OSXとウィンドウの両方でシンボルを垂直に揃えることができません

これは、問題を示すために作成した非常に簡単な例です http://dabblet.com/gist/2971548

Windows では x が垂直方向の中央に配置されていますが、OS X ではそうではありません。この問題を回避するにはどうすればよいですか?

4

1 に答える 1

7

Mac OS X と Windows で表示される内容の違いは、2 つの異なるフォントが使用されており、これらの特定の記号がベースラインに対して異なる高さにあるためです。垂直方向のセンタリングは、文字列内の文字だけでなく、フォントを中央に配置します。

CSS フォント スタックは、「Helvetica Neue、Helvetica、Arial、sans-serif」を指定しています。Mac OS X では、Helvetica Neue が使用されます。Windows では、Helvetica Neue は (通常) 存在せず、単純な Helvetica も存在しないため、Arial が使用されていることはほぼ確実です。これらのフォントのいずれも使用できない他のプラットフォームでは、異なる結果が得られる可能性が高いです。

次のリンクされた図は、共通のベースラインに設定された 2 つのフォントの記号を重ね合わせて示しています。Helvetica Neue は赤です。アリアルはグリーン。Helvetica Neue のシンボルが Arial よりもかなり低いことがはっきりとわかります。

プラス記号の比較

掛け算記号の比較

ここでの最善の修正は、 @font-face フォントを使用して、両方の (すべての) プラットフォームでまったく同じフォントが使用されるようにすることです。これを行うためのフォント データを提供する無料および商用のサービスが多数あります。特定のアプリケーションに最適なものを検索して決定するのは、お客様にお任せします。

于 2012-06-22T18:08:08.947 に答える