Web ページを作成するとき、ブラウザー間で一貫したフォント サイズを実現するにはどうすればよいでしょうか。私は CSS のようなものを使用"font-size: 11pt; font-family: Helvetica,'Lucida Grande'"しましたが、Firefox、IE、Google Chrome、および Safari ではテキストが異なって見えます (これは異なるプラットフォームでも異なります)。基本的に、Windows Vista を実行している同じマシン上で、異なるブラウザーでは異なるルック アンド フィールを取得します。
テキストのサイズがすべての異なるブラウザーで同じように表示されるように、これをどのように修正できますか。
CSS リセットを使用して、すべてのブラウザーで一貫した動作を取得することをお勧めします。
フォント サイズの単位には、pt (ポイント) の代わりに px (ピクセル) を使用します。次に、ピクセルサイズを扱います。
ただし、サイトの使用方法によっては注意してください。フォントサイズの「ハードコーディング」が原因で Web サイトのアクセシビリティの問題が発生したことをめぐって (米国で) 訴訟が発生しています。
Web ページを作成するとき、ブラウザ間で一貫したフォント サイズを実現するにはどうすればよいですか
本文については、ありません。より読みやすいように、より大きなテキストが必要な人もいます。あなたの危険を冒して彼らの邪魔をしてください。「em」や「%」などの単位で相対的なフォント サイズを使用します。
ピクセル サイズの画面上の要素に一致するテキスト サイズが必要な少量のプレゼンテーション テキストの場合は、'px' 単位を使用します。「pt」は使用しないでください。これは印刷の場合にのみ意味があります。画面上で表示すると、多かれ少なかれランダムにサイズが変更されます。
プラットフォームによってフォントが異なるため、テキストをまったく同じサイズにすることはできません。もちろん、Lucida Grande と Helvetica の見た目は大きく異なります。
これらの 2 つの設定を使用すると、まったく同じフォントの外観を実現できます。
font-size: 70%; // better than px
line-height: 110%; // required to make line heights the same
テスト済み: IE9、Firefox、Google Chrome
必要なものを達成する方法があるため、これは答えではありませんが、私はそれらに精通していません。ブループリントのようなフレームワークが通常提供する「リセット」から始めて、そこから進みます。
通常、ブラウザ間のわずかな違いが大きな影響を与えないように、設計を十分に柔軟にする方がはるかに簡単でスマートです。