[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・ＭＳ Ｐゴシック・ヒラギノ角ゴシック・Osaka
スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。
- absolute size
キーワードで指定、フォントサイズはUAに依存
ex.)small, medium - relative size
親要素に対しての相対指定
ex.)smaller, larger - length
正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」
ex.)10pt, 1em - percentage
親要素に対してのパーセント(%)指定
ex.)100%, 120%
この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。
フォントスタイルは、上から「メイリオ」「ＭＳ Ｐゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「ＭＳ Ｐゴシック」はWindows XP、「ヒラギノ角ゴシックW3」「Osaka」はMac OSXで使用されています。
キーワード指定で見え方を比較
em指定で見え方を比較
pt指定で見え方を比較
px指定で見え方を比較
パーセント指定で見え方を比較
メイリオのパーセント指定
ＭＳ Ｐゴシックのパーセント指定
ヒラギノ角ゴシックW3のパーセント指定
Osakaのパーセント指定
補足
今回の検証に使用したOS・ブラウザは、以下の通りです。
- Widnows
- IE7
- Mac OS
- Safari
以前のエントリーから「ヒラギノ角ゴシックW3」を追加しました。
Post on:2007年3月26日
Comments
Web屋さんのココロえ
on 2007年3月27日
CPU占有率100%なので、…
DreamweaverがファイルをクロークするためにCPUを使いまくってて、作業 (more…)
akz
on 2007年3月28日
「ヒラギノ角ゴ W3」とされている書体ですが、「Osaka」のように見受けられます (「あ」が明らかに違います) 。
ご確認ください。
コリス
on 2007年3月28日
akz さん
ご指摘、ありがとうございます。
確かに、Osakaのファイルを使用していました。
ヒラギノに差し替えつつ、ついでにOsakaもそのまま掲載しました。
hands in hands
on 2007年3月29日
WEBにおけるフォントうんぬん…
Windows、Mac、MS Pゴシック、ヒラギノ角ゴ Pro W3、Osaka… (more…)
22
on 2007年4月4日
highslide.jsをお使いのようですが、支払って大変でした？
英語なのでいまいち不安で。
コリス
on 2007年4月4日
22 さん
支払いは、「PayPal」なので手間ではないと思いますが、大変か大変でないかは人によるのでなんとも言えません。
英語が不安とのことなので、フリーで使用できる場合もあるのでライセンスを確認してみるといいかもしれないです。
リンクされているライセンスページに日本語訳もあります。
22
on 2007年4月10日
コリスさん、ありがとう！ お礼おくれました。
調べてみます。でも、AdSenseとか入ってた場合は、もちろん商用になっちゃうだろうなあ。
ところで、こちらのブログがFirefoxでものすごく重たいのは、何か問題があるんでしょうか。
Cnetより重たいのってなかなか無いので、こちらを開くのためらってしまいます。
コリス
on 2007年4月10日
22 さん
Firefox情報、ありがとうございます。
WordPressにいろいろとプラグインを入れてるからかなぁ、、、折りをみて調整してみますね。