web-dev-qa-db-ja.com

ブラウザ間で一貫したフォントサイズ(Web開発)

Webページを作成するとき、ブラウザ間で一貫したフォントサイズを実現するにはどうすればよいですか。 CSSで"font-size: 11pt; font-family: Helvetica,'Lucida Grande'"のようなものを使用しましたが、Firefox、IE、Google Chrome、Safari(これは異なるプラットフォームでもありません)ではテキストが異なります)。同じマシン、つまりWindows Vistaを実行している場合、ブラウザーによってルックアンドフィールが異なります。

テキストのサイズがすべての異なるブラウザで同じように表示されるように、これをどのように修正できますか。

21
user63468

フォントサイズの単位には、pt(ポイント)ではなくpx(ピクセル)を使用してください。次に、ピクセルサイズを扱います。

ただし、サイトの使用方法によっては注意が必要です。フォントサイズの「ハードコーディング」に起因するWebサイトのアクセシビリティの問題について(米国で)訴訟がありました。

7
David Morton

CSSリセットを使用して、すべてのブラウザーで一貫した動作を実現することをお勧めします。

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

16
VBNight

Webページを作成する場合、ブラウザ間で一貫したフォントサイズを実現するにはどうすればよいですか。

本文については、そうではありません。より簡単に読めるように、より大きなテキストが必要な人もいます。あなたの危険で彼らの邪魔をしてください。 「em」や「%」などの単位で相対的なフォントサイズを使用します。

ピクセルサイズの画面上の要素と一致するテキストサイズが必要な少量のプレゼンテーションテキストの場合は、「px」単位を使用します。 「pt」は使用しないでください。これは印刷にのみ意味があり、画面に表示するとランダムにサイズ変更されます。

プラットフォームによってフォントが異なるため、テキストをまったく同じサイズにすることはできません。もちろん、LucidaGrandeとHelveticaの外観は大きく異なります。

7
bobince

これらの2つの設定を使用すると、まったく同じフォントの外観に到達できます。

font-size: 70%; // better than px

line-height: 110%; // required to make line heights the same

テスト済み:IE9、Firefox、Google Chrome

3
Antaran

必要なことを達成する方法があるので、これは答えではありませんが、私はそれらにあまり精通していません。 blueprint のようなフレームワークが通常提供する「リセット」から始めて、そこから進みます。

通常、ブラウザ間のわずかな違いがあまり大きな役割を果たさないように、設計に十分な柔軟性を持たせる方がはるかに簡単でスマートです。

1
rz.