フォントの一括指定のレンダリング

 
フォント
ホーム > CSS2 Note > font > フォントの一括指定のレンダリング

初期値

<style type="text/css"><!--
.eg1 {font:normal normal normal medium/normal Arial, "MS PGothic", Osaka, sans-serif;}
.eg2 {font:medium Arial, "MS PGothic", Osaka, sans-serif;}   /* フォントサイズ(この場合medium)は必須です */
--></style>

<div class="eg1">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg2">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div>
Arial(Windows & Mac)は欧文のみに適用されるフォント、MS PGothic(Windows), Osaka(Mac)は日本語に適用されるフォントです。

*1 fontプロパティにおいてフォントサイズ(この場合medium)とフォントファミリは必須の値です。
 

斜体とスモールキャピタル

<style type="text/css"><!--
.eg1 {font:normal normal medium Arial, "MS PGothic", Osaka, sans-serif;}
.eg2 {font:normal small-caps medium Arial, "MS PGothic", Osaka, sans-serif;}
.eg3 {font:italic normal medium Arial, "MS PGothic", Osaka, sans-serif;}
.eg4 {font:oblique normal medium Arial, "MS PGothic", Osaka, sans-serif;}
--></style>

<div class="eg1">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg2">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg3">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg4">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>
small-capsは日本語には適用されません。また、oblique(slanted, incline)なフォントは、ほとんど存在しません。
Arial(Windows & Mac)は欧文のみに適用されるフォント、MS PGothic(Windows), Osaka(Mac)は日本語に適用されるフォントです。

*1 fontプロパティにおいてフォントサイズ(この場合medium)とフォントファミリは必須の値です。
 

太さ

<style type="text/css"><!--
.eg1 {font:100 medium Arial,sans-serif;}
.eg2 {font:200 medium Arial,sans-serif;}
.eg3 {font:300 medium Arial,sans-serif;}
.eg4 {font:400 medium Arial,sans-serif;}
.eg5 {font:500 medium Arial,sans-serif;}
.eg6 {font:600 medium Arial,sans-serif;}
.eg7 {font:700 medium Arial,sans-serif;}
.eg8 {font:800 medium Arial,sans-serif;}
.eg9 {font:900 medium Arial,sans-serif;}

.eg10 {font:normal medium Arial,sans-serif;}
.eg11 {font:bold medium Arial,sans-serif;}
.eg12 {font:bolder medium Arial,sans-serif;}
.eg13 {font:lighter medium Arial,sans-serif;}
--></style>

<span class="eg1">font:100 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg2">font:200 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg3">font:300 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg4">font:400 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg5">font:500 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg6">font:600 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg7">font:700 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg8">font:800 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg9">font:900 medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg10">font:normal medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg11">font:bold medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg12">font:bolder medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg13">font:lighter medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
*1 fontプロパティにおいてフォントサイズ(この場合medium)とフォントファミリは必須の値です。
 

フォントサイズ

<style type="text/css"><!--
.eg1 {font:xx-small Arial,sans-serif;}
.eg2 {font:x-small Arial,sans-serif;}
.eg3 {font:small Arial,sans-serif;}
.eg4 {font:medium Arial,sans-serif;}
.eg5 {font:large Arial,sans-serif;}
.eg6 {font:x-large Arial,sans-serif;}
.eg7 {font:xx-large Arial,sans-serif;}

.eg8 {font:larger Arial,sans-serif;}
.eg9 {font:smaller Arial,sans-serif;}

.eg10 {font:2em Arial,sans-serif;}
.eg11 {font:2ex Arial,sans-serif;}
.eg12 {font:20px Arial,sans-serif;}
.eg13 {font:0.2in Arial,sans-serif;}   /* 1in=2.54cm */
.eg14 {font:0.8cm Arial,sans-serif;}
.eg15 {font:8mm Arial,sans-serif;}
.eg16 {font:12pt Arial,sans-serif;}   /* 1pt=1/72in */
.eg17 {font:1pc Arial,sans-serif;}   /* 1pc=12pt */

.eg18 {font:100% Arial,sans-serif;}
.eg19 {font:120% Arial,sans-serif;}
.eg20 {font:200% Arial,sans-serif;}
--></style>

<span class="eg1">font:xx-small Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg2">font:x-small Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg3">font:small Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg4">font:medium Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg5">font:large Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg6">font:x-large Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg7">font:xx-large Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg8">font:larger Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg9">font:smaller Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg10">font:2em Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg11">font:2ex Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg12">font:20px Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg13">font:0.2in Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg14">font:0.8cm Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg15">font:8mm Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg16">font:12pt Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg17">font:1pc Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg18">font:100% Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg19">font:120% Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
<span class="eg20">font:200% Arial,sans-serif;</span>&nbsp;&nbsp;&nbsp;
*1 fontプロパティにおいてフォントサイズとフォントファミリは必須の値です。
 

行の高さ

<style type="text/css"><!--
div {width:33.33%; border:solid 1px #c0c0c0; margin-bottom:4px;}
span {font-size:small; font-family:"MS Gothic", Osaka-Mono, monospace;}

.eg1 {font:small/normal "MS PGothic", Osaka, sans-serif;}
.eg2 {font:small/1.1em "MS PGothic", Osaka, sans-serif;}   /* 1.1 = 1.1em = 110% */
.eg3 {font:small/1.2em "MS PGothic", Osaka, sans-serif;}   /* 1.2 = 1.2em = 120% */
.eg4 {font:small/1.5em "MS PGothic", Osaka, sans-serif;}   /* 1.5 = 1.5em = 150% */
.eg5 {font:small/1.8em "MS PGothic", Osaka, sans-serif;}   /* 1.8 = 1.8em = 180% */
--></style>

<div class="eg1">
草枕<br>夏目漱石
</div>
<span>normal</span><br>
<br>

<div class="eg2">
山路を登りながら、こう考えた。<br>智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
</div>
<span>1.1em やはり窮屈な感が否めません。</span><br>
<br>

<div class="eg3">
住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
</div>
<span>1.2em ソースコードには良いかもしれません。</span><br>
<br>

<div class="eg4">
人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
</div>
<span>1.5em ちょうど良い感じです。</span><br>
<br>

<div class="eg5">
越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。
</div>
<span>1.8em 読み物には良い感じです。</span>
主な検索エンジンなどの検索結果に利用されるline-heightの値は、1.2em、1.33em、1.35em、1.5emなどで、大手ポータルサイトの最大行高は1.7emです。いろいろと調べてみると、一般的なline-heightの値は、1.2emから1.8emといわれ、最も読みやすいline-heightの値は、1.5emという意見が多いようです。

MS PGothic(Windows), Osaka(Mac)は日本語に適用されるフォントです。

*1 fontプロパティにおいてフォントサイズ(この場合small)とフォントファミリは必須の値です。
 

フォントファミリ

<style type="text/css"><!--
.eg1 {font:medium/1.5 "MS Gothic", "Hiragino Kaku Gothic Pro", sans-serif;}
.eg2 {font:medium/1.5 "MS PGothic", Osaka-Mono, monospace;}
.eg3 {font:medium/1.5 "MS Mincho", "Hiragino Mincho Pro", serif;}
.eg4 {font:medium/1.5 "MS PMincho", "Hiragino Mincho Pro", serif;}

.eg5 {font:medium Arial, sans-serif;}
.eg6 {font:medium "Arial Black", sans-serif;}
.eg7 {font:medium "Comic Sans MS", cursive;}
.eg8 {font:medium Courier, monospace;}
.eg9 {font:medium "Courier New", monospace;}
.eg10 {font:medium Georgia, serif;}
.eg11 {font:medium Impact, sans-serif;}
.eg12 {font:medium Tahoma, sans-serif;}
.eg13 {font:medium "Times New Roman", serif;}
.eg14 {font:medium "Trebuchet MS", sans-serif;}
.eg15 {font:medium Verdana, sans-serif;}
--></style>

<div class="eg1">色は匂へど散りぬるを我が世誰そ常ならむ 'MS Gothic', 'Hiragino Kaku Gothic Pro'</div>
<div class="eg2">色は匂へど散りぬるを我が世誰そ常ならむ 'MS PGothic', Osaka-Mono</div>
<div class="eg3">色は匂へど散りぬるを我が世誰そ常ならむ 'MS Mincho', 'Hiragino Mincho Pro'</div>
<div class="eg4">色は匂へど散りぬるを我が世誰そ常ならむ 'MS P明朝', 'Hiragino Mincho Pro'</div>
<br>
<div class="eg5">The quick brown fox jumps over the lazy dog. Arial.</div>
<div class="eg6">The quick brown fox jumps over the lazy dog. Arial Black.</div>
<div class="eg7">The quick brown fox jumps over the lazy dog. Comic Sans MS.</div>
<div class="eg8">The quick brown fox jumps over the lazy dog. Courier.</div>
<div class="eg9">The quick brown fox jumps over the lazy dog. Courier New.</div>
<div class="eg10">The quick brown fox jumps over the lazy dog. Georgia.</div>
<div class="eg11">The quick brown fox jumps over the lazy dog. Impact.</div>
<div class="eg12">The quick brown fox jumps over the lazy dog. Tahoma.</div>
<div class="eg13">The quick brown fox jumps over the lazy dog. Times New Roman.</div>
<div class="eg14">The quick brown fox jumps over the lazy dog. Trebuchet MS.</div>
<div class="eg15">The quick brown fox jumps over the lazy dog. Verdana.</div>
日本語フォントには、汎用的なフォントをサンプルとして指定しました。欧文フォントには、Windows, Mac OSともに対応している11の共通フォントを指定しました。

-Safari3では、「フォント名の中に日本語を含む指定は無効」であることに注意しなければなりません。

*1 fontプロパティにおいてフォントサイズ(この場合medium)とフォントファミリは必須の値です。
 

汎用ファミリ(generic-family)

<style type="text/css"><!--
.eg1 {font:medium serif;}      /* 明朝系のフォント */
.eg2 {font:medium sans-serif;} /* ゴシック系のフォント */
.eg3 {font:medium cursive;}    /* 筆記体、草書体系のフォント */
.eg4 {font:medium fantasy;}    /* 装飾的なフォント */
.eg5 {font:medium monospace;}  /* 等幅のフォント */
--></style>

<div class="eg1">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg2">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg3">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg4">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg5">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div>
汎用ファミリは、OS、文書の文字セット(charset)およびブラウザによって描画が大きく異なります。
たとえば、Windows XP IE7において日本語の文字セット"SHIFT_JIS" "EUC-JP" "ISO-2022-JP"(JIS)を用いた際には、日本語もアルファベットも日本語として描画されます。しかしながら、Unicodeの文字セット"UTF-8"を指定した際には、日本語には反映されずアルファベットは欧文として描画されます。ちなみにサンプルのcharsetはSHIFT_JISです。

*1 fontプロパティにおいてフォントサイズ(この場合medium)とフォントファミリは必須の値です。
 

システムフォント

<style type="text/css"><!--
.eg1 {font:caption;}
.eg2 {font:icon;}
.eg3 {font:menu;}
.eg4 {font:message-box;}
.eg5 {font:small-caption;}
.eg6 {font:status-bar;}
--></style>

<div class="eg1">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg2">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg3">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg4">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg5">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg6">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div>
システムフォントは1つだけ指定することが可能であり、ファミリ、サイズ、ウェイト、スタイルなど全体の値を同時に設定します。個別に指定する必要があるならば、個別のプロパティにより上書きしなければなりません。

*1 fontプロパティにおいてフォントサイズとフォントファミリは必須の値です。ただし、システムフォント、inheritの設定時を除く。
 
トップページ CSS2 Note ページトップ
 2009/09/01発行 2009/09/01更新