1

私はプロジェクトに取り組んでおり、Windows と Mac OS X の間で Web 上のフォント サイズ (幅) に違いがある理由を知りたいです。Mac のすべてのブラウザーは同じサイズですが、Windows では異なることがわかりました。ブラウザから葯へ。私はイライラしてあなたからここに来るのを待っています。私の質問は、なぜそれらの間に幅の違いがあるのですか?

4

3 に答える 3

6

考えられる理由は多数あります。

  1. 異なるフォント。Windows のフォントと同一の Mac フォントはほとんどありません。(Windows の結果が Mac の結果と一致することを期待しているのか、単に Windows で一貫していることを期待しているのかは明らかではありません。)

  2. デフォルトのサイズが異なります。ほとんどのブラウザーには、フォントとサイズの既定値があり、すべてが同じであるとは限りません。

  3. フォントサイズの異なる解釈。(たとえば) 10 ポイントのフォントが必要だと言うとき、それが何を意味するのか完全に明確に定義されているわけではありません。トゥルー ポイント (1/72.27 インチ) もありますが、より一般的にはコンピューター ポイント (1/72 インチ) があります。文字セルの高さが必要ですか? 内部誘導の有無？それとも、実際の文字の高さ、または単にフォントの上昇を意味していましたか? ブラウザによって、サイズの解釈が異なる場合があります。

  4. 異なる解像度。ブラウザーは、さまざまな画面解像度を異なる方法で処理する場合があります。Windows には「論理インチ」という概念があり、これは通常、ディスプレイ上の実際のインチよりも大きくなります。しかし、どれくらい大きくなるかはユーザーがカスタマイズできます。一部のブラウザーは、論理インチを無視して、デバイスの実際の DPI を使用する場合があります (または、少なくとも DPI と見なされているものであり、OS は実際には認識していない可能性があります)。

  5. さまざまなレンダリング テクノロジ。ヒンティング、アンチエイリアシング、サブピクセル レンダリング (ClearType など)、またはこれらの組み合わせを使用するかどうかは、テキストの幅にわずかに影響を与える可能性があります (正確なフォントと正確な垂直サイズについて全員が同意している場合でも)。

  6. 異なるスケール。ほとんどのブラウザーはスケーリング機能を提供しており、異なるブラウザーで同じ値にデフォルト設定されていない可能性があります。また、スケールを変更すると、テキストの幅が線形にスケーリングされないことが多いことに注意してください (#5 を参照)。

これらの問題のいずれかが、テキスト幅の違い (さまざまなワード ラップの選択にカスケードする可能性があります) につながる可能性があり、ページがブラウザーごと、マシンごとに異なって見えるようになります。多くの場合、一貫性を妨げるこれらの問題が組み合わさっている可能性があります。

解決策は、レイアウトを柔軟に設計することです。もの ( a のサイズなど) をハードコーディングしてフォント サイズに暗黙の依存関係を作成しないでください。テキストが常に収まることを期待してください。一般に、テキストのサイズに相対的なサイズを選択し、実際のテキスト サイズの変動に備えてください。

于 2013-04-09T16:05:08.467 に答える
0

Web ページのレンダリングのテキスト サイズを義務付ける標準がないため、違いがあります。そのため、ブラウザー ベンダーは、希望するサイズでテキストを自由にレンダリングできます。

于 2013-04-09T15:42:26.143 に答える
0

一貫してレンダリングする必要がある HTML 広告で作業しているときに、この問題に遭遇しました。このような状況では、要素が数ピクセルずれているだけでも、デザインがアマチュアに見えることがあります。

より正確なクロスプラットフォームの結果を得る 1 つの方法は、ポイントや em ではなくピクセル値を指定することです。このようなテキストは、デバイスの解像度に関係なく同じサイズでレンダリングされ、ズームインおよびズームアウトしても適切にスケーリングされます。Retina/HD ディスプレイでも、CSS ピクセルはデバイス ピクセルと必ずしも同じではないためです。

さらに、Web フォントまたは非常に一般的なフォントの使用を強制し、アンチエイリアス方法を明示的に設定すると、ピクセル パーフェクトな結果にさらに近づくことができます。以下のコードは、環境に関係なくほぼ同じようにレンダリングされることがわかりました。

html, body {
    font-family: Arial, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
于 2014-11-12T22:26:15.587 に答える