Eitaroh's FontTEST
えいたろうのふぉんとてすと
文字のサイズはいろいろ指定できるけどどう違うの？
見る人によって違うフォントサイズの実験
■
スタイルシートでのフォントサイズの指定とブラウザの表示の差異の実験です。 ブラウザの表示サイズを変更して、指定方法の違いによる文字サイズや改行幅の違いを確認してください。 特に万人向けのサイトを作りたい場合は、OSの違いやブラウザの違いによる表示の違いにも注目してください。
ブラウザ表示
Eitaroh's HomePAGE えいたろうのほーむページ xx-small
Eitaroh's HomePAGE えいたろうのほーむページ x-small
Eitaroh's HomePAGE えいたろうのほーむページ small
Eitaroh's HomePAGE えいたろうのほーむページ medium
Eitaroh's HomePAGE えいたろうのほーむページ large
Eitaroh's HomePAGE えいたろうのほーむページ x-large
Eitaroh's HomePAGE えいたろうのほーむページ xx-large
Eitaroh's HomePAGE えいたろうのほーむページ h6
Eitaroh's HomePAGE えいたろうのほーむページ h5
Eitaroh's HomePAGE えいたろうのほーむページ h4
Eitaroh's HomePAGE えいたろうのほーむページ h3
Eitaroh's HomePAGE えいたろうのほーむページ h2
Eitaroh's HomePAGE えいたろうのほーむページ h1
Eitaroh's HomePAGE えいたろうのほーむページ 未設定
Eitaroh's HomePAGE えいたろうのほーむページ 12pt ポイント 絶対値
Eitaroh's HomePAGE えいたろうのほーむページ 16px ピクセル 絶対値
Eitaroh's HomePAGE えいたろうのほーむページ 4.2mm 絶対値
Eitaroh's HomePAGE えいたろうのほーむページ 0.42cm 絶対値
Eitaroh's HomePAGE えいたろうのほーむページ 0.165in 絶対値
Eitaroh's HomePAGE えいたろうのほーむページ 1pc 12pt=1pc絶対値
Eitaroh's HomePAGE えいたろうのほーむページ 1em [M] 相対値 親要素
Eitaroh's HomePAGE えいたろうのほーむページ 1.1em [M] 相対値 親要素
Eitaroh's HomePAGE えいたろうのほーむページ 1.2em [M] 相対値 親要素
Eitaroh's HomePAGE えいたろうのほーむページ 1.3em [M] 相対値 親要素
Eitaroh's HomePAGE えいたろうのほーむページ 1.4em [M] 相対値 親要素
Eitaroh's HomePAGE えいたろうのほーむページ 1.5em [M] 相対値 親要素
Eitaroh's HomePAGE えいたろうのほーむページ 1.6em [M] 相対値 親要素
Eitaroh's HomePAGE えいたろうのほーむページ 2ex [x] 相対値 要素内
Eitaroh's HomePAGE えいたろうのほーむページ 2.1ex [x] 相対値 要素内
Eitaroh's HomePAGE えいたろうのほーむページ 2.2ex [x] 相対値 要素内
Eitaroh's HomePAGE えいたろうのほーむページ 2.3ex [x] 相対値 要素内
Eitaroh's HomePAGE えいたろうのほーむページ 2.4ex [x] 相対値 要素内
Eitaroh's HomePAGE えいたろうのほーむページ 2.5ex [x] 相対値 要素内
Eitaroh's HomePAGE えいたろうのほーむページ 2.6ex [x] 相対値 要素内
Eitaroh's HomePAGE えいたろうのほーむページ 100% パーセント 相対値
ソースコード
<div class="xxsmall">
Eitaroh's HomePAGE えいたろうのほーむページ xx-small</div>
<div class="xsmall">
Eitaroh's HomePAGE えいたろうのほーむページ x-small</div>
<div class="small">
Eitaroh's HomePAGE えいたろうのほーむページ small</div>
<div class="medium">
Eitaroh's HomePAGE えいたろうのほーむページ medium</div>
<div class="large">
Eitaroh's HomePAGE えいたろうのほーむページ large</div>
<div class="xlarge">
Eitaroh's HomePAGE えいたろうのほーむページ x-large</div>
<div class="xxlarge">
Eitaroh's HomePAGE えいたろうのほーむページ xx-large</div>
<h6>Eitaroh's HomePAGE えいたろうのほーむページ h6</h6>
<h5>Eitaroh's HomePAGE えいたろうのほーむページ h5</h5>
<h4>Eitaroh's HomePAGE えいたろうのほーむページ h4</h4>
<h3>Eitaroh's HomePAGE えいたろうのほーむページ h3</h3>
<h2>Eitaroh's HomePAGE えいたろうのほーむページ h2</h2>
<h1>Eitaroh's HomePAGE えいたろうのほーむページ h1</h1>
<div>
Eitaroh's HomePAGE えいたろうのほーむページ 未設定</div>
<div class="pt">
Eitaroh's HomePAGE えいたろうのほーむページ 12pt ポイント 絶対値</div>
<div class="px">
Eitaroh's HomePAGE えいたろうのほーむページ 16px ピクセル 相対値</div>
<div class="mm">
Eitaroh's HomePAGE えいたろうのほーむページ 4.2mm 絶対値</div>
<div class="cm">
Eitaroh's HomePAGE えいたろうのほーむページ 0.42cm 絶対値</div>
<div class="in">
Eitaroh's HomePAGE えいたろうのほーむページ 0.165in 絶対値</div>
<div class="pc">
Eitaroh's HomePAGE えいたろうのほーむページ 1pc 12pt=1pc絶対値</div>
<div class="em">
Eitaroh's HomePAGE えいたろうのほーむページ 1em [M] 相対値 親要素</div>
<div class="ex">
Eitaroh's HomePAGE えいたろうのほーむページ 2ex [x] 相対値 要素内</div>
<div class="pa">
Eitaroh's HomePAGE えいたろうのほーむページ 100% パーセント 相対値</div>
Eitaroh's HomePAGE えいたろうのほーむページ xx-small</div>
<div class="xsmall">
Eitaroh's HomePAGE えいたろうのほーむページ x-small</div>
<div class="small">
Eitaroh's HomePAGE えいたろうのほーむページ small</div>
<div class="medium">
Eitaroh's HomePAGE えいたろうのほーむページ medium</div>
<div class="large">
Eitaroh's HomePAGE えいたろうのほーむページ large</div>
<div class="xlarge">
Eitaroh's HomePAGE えいたろうのほーむページ x-large</div>
<div class="xxlarge">
Eitaroh's HomePAGE えいたろうのほーむページ xx-large</div>
<h6>Eitaroh's HomePAGE えいたろうのほーむページ h6</h6>
<h5>Eitaroh's HomePAGE えいたろうのほーむページ h5</h5>
<h4>Eitaroh's HomePAGE えいたろうのほーむページ h4</h4>
<h3>Eitaroh's HomePAGE えいたろうのほーむページ h3</h3>
<h2>Eitaroh's HomePAGE えいたろうのほーむページ h2</h2>
<h1>Eitaroh's HomePAGE えいたろうのほーむページ h1</h1>
<div>
Eitaroh's HomePAGE えいたろうのほーむページ 未設定</div>
<div class="pt">
Eitaroh's HomePAGE えいたろうのほーむページ 12pt ポイント 絶対値</div>
<div class="px">
Eitaroh's HomePAGE えいたろうのほーむページ 16px ピクセル 相対値</div>
<div class="mm">
Eitaroh's HomePAGE えいたろうのほーむページ 4.2mm 絶対値</div>
<div class="cm">
Eitaroh's HomePAGE えいたろうのほーむページ 0.42cm 絶対値</div>
<div class="in">
Eitaroh's HomePAGE えいたろうのほーむページ 0.165in 絶対値</div>
<div class="pc">
Eitaroh's HomePAGE えいたろうのほーむページ 1pc 12pt=1pc絶対値</div>
<div class="em">
Eitaroh's HomePAGE えいたろうのほーむページ 1em [M] 相対値 親要素</div>
<div class="ex">
Eitaroh's HomePAGE えいたろうのほーむページ 2ex [x] 相対値 要素内</div>
<div class="pa">
Eitaroh's HomePAGE えいたろうのほーむページ 100% パーセント 相対値</div>
スタイルシート
.xxsmall {
font-size:xx-small
}
.xsmall {
font-size:x-small
}
.small {
font-size:small
}
.medium {
font-size:medium
}
.large {
font-size:large
}
.xlarge {
font-size:x-large
}
.xxlarge {
font-size:xx-large
}
.pt {
font-size:12pt
}
.px {
font-size:16px
}
.mm {
font-size:4.2mm
}
.cm {
font-size:0.42cm
}
.in {
font-size:0.165in
}
.pc {
font-size:1pc
}
.em {
font-size:1em
}
.ex {
font-size:2ex
}
.pa {
font-size:100%
}
font-size:xx-small
}
.xsmall {
font-size:x-small
}
.small {
font-size:small
}
.medium {
font-size:medium
}
.large {
font-size:large
}
.xlarge {
font-size:x-large
}
.xxlarge {
font-size:xx-large
}
.pt {
font-size:12pt
}
.px {
font-size:16px
}
.mm {
font-size:4.2mm
}
.cm {
font-size:0.42cm
}
.in {
font-size:0.165in
}
.pc {
font-size:1pc
}
.em {
font-size:1em
}
.ex {
font-size:2ex
}
.pa {
font-size:100%
}