ブラウザによって異なるフォントサイズについて

質問

ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。

具体的には、フォントのサイズが
ＩＥ８＜Ｓａｆａｒｉ＜Ｆｉｒｅｆｏｘ３
になっています。

価格．ｃｏｍなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。

スタイルシートに
body {
font:13px;
*font-size:small;
*font:x-small;
}
を書き加えてみましたがあまり変化はありませんでした。

どのようにすればいいのでしょうか？

回答No.9

0909union · ベストアンサー

だれも、正しいなんて、言っていませんよ。回答した人全て、正しいとは。

ハックなんて、正しくない指定とか、正しいが、他と違う動きだ、とか、そのような物をあえて使うことがハック。

http://troi.kbc-ehime.ac.jp/kj/?p=1672
（あくまで記載されている文献なので、内容の正当性は確認していない）

わかりやすいのが、クロスぶらうざで、

if ( document.all )　{
dhtml ブラウザ
} else {
DOM対応ブラウザ
}

とJavaScriptのコード。これ本来、動作は決まっていなかったが、オブジェクトだとtrueを返すなんて言う隠れた仕様が表にでてきただけ。

http://freematerial.fc2web.com/ref_js/ref_js_w_d_all.html
（あくまで記載されている文献なので、内容の正当性は確認していない）

昔あやまって1箇所いサイズにPXを指定していて、他と同じサイズなのに違うサイズになっていた事に気がついたが、しかし、特にエラーにはならずに無視されたか、デフォルトの設定が効いていると思った。が、ちょっと違うようだった。これに気がついたのがIE５．０のとき。（だいぶ他人より気づくのおそかったな）

IEのDOCTYPEの設定によりスタンダートか、そうでないかの指定でも違った。他のブラウザでも試したが、反応がまちまち。同じエンジンだと、ほぼいっしょのはずなんだが・・・

私は、このようなハックのやり方は嫌いだ。しかし便利につかえる所がある。プログラミング的には、ごてごてになるやりかたなので、業務用のソフトでも、緊急避難的に、プラットフォーム（OSなど）のバグを回避して、バグの仕様に付き合ってパッチを出す事が多い。

もちろん、メーカーに（マイクロソフトとかSunとかIBMとか）、パッチ要求しているが、時間的に無理があり、パッチが出るまで、その方式になっているが、結局次期バージョンとかで再度そこのコードを改変しなといけないので、２度、３度でまになっています。そのような経験しているので、ハックはやりたくない。でも、便利だ（セキュリティーパッチなんて嫌いだ）。

その微妙な動作なので、マトリックスを作って、じっくりテストしてください。と言っている。へたすると、時期MicrosoftUpdateで、動作が変わっているかもしれない。他のブラウザも同じ。時期バージョンで、「あ、そこはバグだったので修正しました」なんていわれるかもしれない。そのリスクは十分にある。ただ、ハックを推奨している向きもある。

私と同じように、そのコードを書いた人のミスなら、それは、それとして直す必要がある。

なお、CSSだと無効な物は、無視される事がおおいが、それが実は効いている事もあるので、じっくり吟味してほしい。例えば上位が、12pt で、カレントが　20pxと指定した場合とか。その逆も。そのような所にバグ（仕様）が多い。

回答No.8

Tacosan

「font プロパティ」はあるけど今の例だと指定が間違ってるから結局アウトでは＞#5.

参考URL：

http://www.w3.org/TR/CSS1/#font

回答No.7

ORUKA1951

No.1です。
繰り返しますが、pxは相対サイズです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
相対単位には以下のものがある:
　・em: 関連要素の'font-size'の値を参照する
　・ex: 関連フォントの'x-height'を参照する
　・px: 閲覧しているデバイスの解像度を参照する
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-units )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
相対単位に分類されているピクセルはディスプレイでの表示を前提に考えると絶対単位のように思えるかもしれませんが、 これはれっきとした相対単位です。 出力機器の画素の大きさに左右されるためです。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［長さ(length)の単位 - Web標準普及プロジェクト( http://www.mozilla.gr.jp/standards/webtips0027.html )］より

　ただ、今回の問題は、font-sizeとなるべきところを、fontと書いてしまったためだと思います。わからないときは、まず仕様書を確認する癖をつけましょう。仕様書を読まずに書かれているサイトやマニュアルもありますので・・

回答No.6

tracer

font-sizeのpx指定は、絶対値指定なので、画面解像度以外の部分でブラウザによって差がでることはないと思いますよ。
もちろんブラウザ間で表示されているフォントが異なれば、具合も変わるのでそこは差っ引いてみてください。
問題があるとしたら、CSSのカスケードの仕方です。つまりどこかで記述がおかしくなっていると思います。
ためしに、すべてのCSS(場合によってはJSも)を削除して、
*{
font-size:13px;
font-weight:normal;
}
としてみてください。

どうですか？
ブラウザによって差がありますか？
この状態で差がないことを確認出来れば、あとはCSSを追加しながら問題がでるところまでコツコツと追いかけるだけです。

回答No.5

0909union

どのようなつもりで font　プロパティ　が無い、と言ったのわかりません。

http://msdn.microsoft.com/en-us/library/ms530756(v=VS.85).aspx
http://www.w3.org/TR/REC-CSS1/#font

と言うことで基本的なCSS　バージョン１　から定義されていましたが？

ハックとの組み合わせなので、微妙な動作。ちゃんとテストしないと。

回答No.4

ORUKA1951

えっっあまりに初歩的
★ちゃんと調べて質問なり、回答しなけりゃ。
　ネット上に参照すべき資料は必ずある。

　font: というプロパティはないですよ。HTMLと間違えてない？？
font-size:14px;
でなけりゃ・・・elementのattributeと混同しないように
font-colorじゃなくて、color:とかも、よく間違う

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・em: 関連要素の'font-size'の値を参照する
・ex: 関連フォントの'x-height'を参照する
・px: 閲覧しているデバイスの解像度を参照する
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-units )］より
なお、pxは相対サイズなので絶対サイズで指定したけりゃ
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
絶対単位は、出力媒体の物理的性質が予め判っている場合に限り有用である。 絶対単位には以下のものがある:
・in: インチ -- 1inは2.54cmに等しい
・cm: センチメートル
・mm: ミリメートル
・pt: ポイント -- 1ptは1/72inに等しい
・pc: パイカ -- 1pcは12ptに等しい
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-units )］より

　たとえばpxは、WindowsとMacでは違うサイズになる。

★絶対サイズは薦めません。端末やユーザの環境は異なるので、あくまで利用者の標準サイズを基準に決めてあげよう。目の悪い人、解像度の低い端末・・・もあるのですよ。
　フォントサイズを指定しなくても表示が崩れないように、それがスタイルシートの目的かも。

回答No.3

abacabu

趣味でホームページを作成している30代男です。
まず、ページを訪問した人全てに同じ文字の大きさで
提供しようというのがそもそもの間違いです。
理由としましては、お使いのブラウザそれぞれでの文字の
表示形式を統一しての比較をされていますか？
ただ単にブラウザをインストールして詳細設定した後の比較
ですとまだ近い状態には近づくと思いますが、
恐らくブラウザによって「１３ｐｘ」の扱いが違うと思います。
試しに「１３ｐｘ」を「８０％」としてみて下さい。
それでもかなり違いますかね？
この％表記はお使いのブラウザの文字表示のデフォルトが
仮にIE６でフォントサイズ中の時にmediumuの大きさが１６ｐｘ
相当とします。この時に７５％で指定すると、その１６ｐｘの７５％
つまり１２ｐｘ相当の大きさで表示されるというものです。
CSSでは、以前よりｐｘ設定は非推奨されています。
理由は質問者様の抱えている問題の為です。
これはちなみに＜ｐ＞要素にも反映されます。
という様に全く同じ表示にするという事がそもそも無理です。
おおむねこの位の表示をさせたいとお考えください。
まぁJavaScriptとかで条件を指定すれば全く一緒というのは
可能かもしれませんが、HTML＋CSSではなかなか難しいと
思われます。

回答No.2

0909union

まだまだ経験が浅いようだ。

body {
font:13px;
*font-size:small;
*font:x-small;
}

どこから持ってきたのだろう。

普通、そのままCSS適用する思うが。必要なのは全部のCSS、JSファイル、さあ全部適用して、これはと思う物をはずしてみよう。

それがデバックの仕方。

普通、はずす前に、その使い方が、CSSのどのバージョンで、どのような仕様になっているか調べると思うが、さらにブラウザによって、どのように適用されているのか調べると思うのだが、

どうだろう。

＞どのブラウザでも同じサイズに見えます。

そうかな～

ひんとだけ

http://www.webbibo.com/blog/htmlcss/selector.html

このような人もいる。しかし、テキストを買えば、同じような事が載っているのだが・・・・

回答No.1

naokita

13pxなら、YUIベースで同じに見えるけど、
フォントファミリーは？　ＭＳ Ｐゴシックで比較してみれば？

body {
font:13px/1.231 "ＭＳ Ｐゴシック",sans-serif;
*font-size:small;
*font:x-small;
}

body{ font-size:small !important; font-size:x-small;}
とか、
body{ font-size:13px !important;}
とか、
body{ font-size:13px !important; font-size: 81.2%;}
*:first-child+html body{ font-size: small !important;}

色々やってみたら？
フォントファミリーや古いブラウザ、DTDによっても違うし・・・