■概要
font属性は、文字のスタイルを定義します。関連する6つの属性があり、ひとつの要素で全てを設定することができます。
では、属性を見てみましょう。
| font-style | 斜体など文字のスタイルを設定 |
| font-weight | 文字の太さ |
| font-variant | フォントのスモールキャップ |
| font-size | 文字サイズ |
| line-height | 行の高さ |
| font-family | フォントの名前 |
font属性は下記のような順番で複数の属性を同時に書くことができます。
font: font-style font-variant font-weight font-size/line-height font-family
■font-style
フォントのスタイルで、主に斜体を設定するために使います。
■font-weight
文字の太さで、決まった単語か100～900の数字で設定します。
デフォルトはnormalです。
■font-size
文字のサイズで、タグのsize属性と同じです。
(HTML5からタグは勧められなく、CSSを使用しないといけません)
px, emなどの単位とsmall, bigなどの定数が使えます。
(一般のWEBサイトはpxを使用します)
■font-family
フォントの種類で、タグのface属性と同じです。
カンマ(,)区切りで複数のフォントを設定することができます。この場合、最初に設定したフォントを優先にし、そのフォントがない場合に次に設定されたフォントを使います。
■使用方法
.box1 {
font-size: 20px;
font-family: Verdana,”メイリオ”,Meiryo;
}
.box1 .title { font-weight: bold }
.ex1 { font: 15px NanumGothic, sans-serif }
.ex2 { font: italic bold 12px/30px Dotum, sans-serif }
■例
<html>
<head>
<style>
#text1 { font-size: 37px }
#text2 { font-size: 28px }
#text3 { font-size: 19px }.bold { font-weight: bold }
.italic{ font-style: italic }
.jinji{ font-family: “メイリオ” }#text4{ font: italic bold 20px serif; }
</style>
</head>
<body>
<div id=”text1″>37px</div>
<div id=”text2″>28px</div>
<div id=”text3″>19px</div>
<br>
<div class=”bold”>太い文字</div>
<div class=”italic”>斜体</div>
<div class=”jinji”>メイリオ フォント</div>
<br>
<div id=”text4″>This a pen.</div>
</body>
</html>
出力結果
37px28px19px太い文字斜体メイリオ フォントThis a pen.
