Webサイトのフォントサイズを統一したい!!

質問

xml宣言なしのXHTML 1.0 Transitionalでコーディングをしています。
基本win&Macのモダンブラウザーが対象ですが可能な限り幅広く対応させたいと思っています。
現状はbodyタグにfont-size100%指定をしてそれを基準にして
サイズ変更したい場合は個別に90%や80%などにして指定しています。
分かりきっているのですが環境によってフォントサイズがマチマチです。
希望としてはどの環境で見ても同じフォントサイズで表示されるようにしたいのですが
一般的(ベストな方法)を教えていただきたくおもいます。
その際できるだけ環境別に専用のCSSを読み込ませるなどの方法は出来る限り避けたいので
それ以外の方法でなるべくシンプル(スマート)な方法を教えていただきたくおもいます。

回答No.3

神崎 渉瑠（@taloo）

body, th, td{
font-size:12px;
}
p.attention{
font-size: 144%;
}

body{font-size:100%}では100%とするための基準サイズが必要ですが、
それがブラウザごとに違います。

最小単位は1pxですので、%で指定した場合の端数が切り上げ、切り捨て、四捨五入のどれになるかはブラウザ依存です。
もしそこまであわせたいのであれば、YUIなどのスクリプトライブラリが便利だと思います。

> 希望としてはどの環境で見ても同じフォントサイズで表示されるようにしたいのですが
Safari、Opera、Firefoxには最小フォントサイズというのがありますので、それより小さくすることはできません。
（添付画像、YUIのサンプル。Safari。14px以下はすべて14pxで表示）

Win IEにはCSSで指定されたフォントサイズや色を無視する設定があります。

ツールメニュー -> インターネットオプション -> 全般タブ -> ユーザー補助 -> 書式設定：「Webページで指定されたフォントサイズを使用しない」にチェック

回答No.2

ORUKA1951

CSSのサイズ指定には、絶対サイズと相対サイズがありますね。
絶対サイズは
in----1ｉnchi 約25.4mm
cm---cm
pc--- ＝12 ポイント(1 インチに 10 字）約4.23mm
mm---
pt----1pt≒0.3514mm
それ以外は、em,ex,px相対サイズ
また、font-sizeにおいては、
xx-small／x-small／small／medium／large／x-large／xx-large
が絶対サイズ
larger／smaller
が絶対サイズとされています。

＞その際できるだけ環境別に専用のCSSを読み込ませるなどの方法は出来る限り避けたい
の目的がなぜかわからないのですが、携帯電話・PDA・パソコン・印刷機と様々な環境が存在するので、環境ごとに指定するほうがよいのではないかと思います。
　ちなみに私は、HTML/XHTMLのデフォルトのテンプレートは、
<link rel="stylesheet" *** />
<link rel="stylesheet" *** media="screen" title="標準" />
<link rel="stylesheet" *** media="screen" title="標準" /><!-- 配置サイズ -->
<link rel="stylesheet" *** media="screen" title="標準" /><!-- 色指定 -->
<link rel="ALTERNATE stylesheet" *** media="screen" title="大きな文字" />
・・省略・・
<link rel="styleSheet" *** media="handheld,tty" />
<link rel="styleSheet" *** media="print" />
と、固定スタイルシート、優先スタイルシート、(screnn用)代替スタイルシートを設定しています。
　あなたの場合、固定スタイルシートに
body{
font-size:10.5pt;
font-family:"ＭＳ Ｐ明朝","平成明朝",serif;
}
p{ text-indent: 1em;}

等と記述した一枚のCSSを最初(一行目)に固定スタイルシートとして読み込ませればよいのではないかと・・
　２行目以降のスタイルシートへの参照は従来のまま。

回答No.1

kirin_55

YUIのfontcssを使用されてはいかがでしょうか。
「YUI　fontcss」で検索すればひっかかります。

私の場合はそれにプラスしてresetcssを使用しています。

Yahoo! UI Library: Fonts CSS
http://developer.yahoo.com/yui/fonts/

解説はこちらが分かりやすかったです
http://tenderfeel.xsrv.jp/css/26/