トップページ > FONT指定見本
CSSレイアウト[FONT指定見本]
本サイトは本文の文字サイズを12px相当に縮小して指定しているが、このページのみ標準（100％）に戻して表示してる。この文章のテキストがデフォルトの100％表示の大きさ。WINでの標準文字サイズは16px、MACでは14px。
文字の大きさ比較
％はemsと同じなので省略（2em=200%, 0.75em=75%）
hx
h1の文字の大きさ
h2の文字の大きさ
h3の文字の大きさ
h4の文字の大きさ
h5の文字の大きさ
h6の文字の大きさ
em
2emの文字の大きさ
1.5emの大きさ
1.25emの大きさ
1emの大きさ
0.75emの大きさ
0.625emの大きさ
name
xx-largeの大きさ
x-largeの大きさ
mediumの大きさ
smallの大きさ
x-smallの大きさ
xx-smallの大きさ
pixel
32pxの大きさ
24pxの大きさ
20pxの大きさ
16pxの大きさ
14pxの大きさ
12pxの大きさ
10pxの大きさ
1pxの大きさ
本文の文字の大きさ比較
ここでデフォルトの大きさとの比較が出来る。WINの無指定サイズ、MACの無指定サイズを確認。
フォントサイズ：無指定／行間：1.6em
本文の文字の大きさ比較。無指定標準サイズの文字の大きさと比較してください。行間は1.6emに指定しています。
フォントサイズ：14px／行間：1.6em
本文の文字の大きさ比較。無指定標準サイズの文字の大きさと比較してください。行間は1.6emに指定しています。
フォントサイズ：16px／行間：1.6em
本文の文字の大きさ比較。無指定標準サイズの文字の大きさと比較してください。行間は1.6emに指定しています。
行間(line-height)の比較
フォントサイズ：86%／行間：1em
行間の比較。同じ文字サイズで行間を変えていき違いを見ます。この文字は86％の大きさです。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：86%／行間：1.2em
行間の比較。同じ文字サイズで行間を変えていき違いを見ます。この文字は86％の大きさです。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：86%／行間：1.4em
行間の比較。同じ文字サイズで行間を変えていき違いを見ます。この文字は86％の大きさです。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：86%／行間：1.6em
行間の比較。同じ文字サイズで行間を変えていき違いを見ます。この文字は86％の大きさです。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：86%／行間：1.8em
行間の比較。同じ文字サイズで行間を変えていき違いを見ます。この文字は86％の大きさです。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：86%／行間：2em
行間の比較。同じ文字サイズで行間を変えていき違いを見ます。この文字は86％の大きさです。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：71%／行間：1em
この文字は71％の大きさです。行間の比較。同じ文字サイズで行間を変えていき違いを見ます。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：71%／行間：1.2em
この文字は71％の大きさです。行間の比較。同じ文字サイズで行間を変えていき違いを見ます。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：71%／行間：1.4em
この文字は71％の大きさです。行間の比較。同じ文字サイズで行間を変えていき違いを見ます。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：71%／行間：1.6em
この文字は71％の大きさです。行間の比較。同じ文字サイズで行間を変えていき違いを見ます。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：71%／行間：1.8em
この文字は71％の大きさです。行間の比較。同じ文字サイズで行間を変えていき違いを見ます。文字サイズにより読みやすく美しい書面になる行間が違います。
フォントサイズ：71%／行間：2em
この文字は71％の大きさです。行間の比較。同じ文字サイズで行間を変えていき違いを見ます。文字サイズにより読みやすく美しい書面になる行間が違います。
文字のスタイル(font-style)と、装飾(text-decoration)
font-style : italic
フォント-スタイル＿イタリック
font-style : oblique
フォント-スタイル＿オブリーク
text-decoration : underline
テキスト-デコレーション＿アンダーライン
text-decoration : overline
テキスト-デコレーション＿オーバーライン
text-decoration : underline overline
テキスト-デコレーション＿上下ライン
text-decoration : line-through
テキスト-デコレーション＿取り消し線
文字の太さ(font-weight)
font-weight : normal
フォントの太さ＿ノーマル
font-weight : bold
フォントの太さ＿ボールド
font-weight : bolder
フォントの太さ＿特太(bolder)
font-weight : 100
フォントの太さ＿100
font-weight : 200
フォントの太さ＿200
font-weight : 300
フォントの太さ＿300
font-weight : 400
フォントの太さ＿400
font-weight : 500
フォントの太さ＿500
font-weight : 600
フォントの太さ＿600
font-weight : 700
フォントの太さ＿700
font-weight : 800
フォントの太さ＿800
font-weight : 900
フォントの太さ＿900