フォントに関するプロパティを説明します。
★フォント（字体）を指定する
書式 font-family:フォント名
半角スペースが入っているフォント名の場合「" "」で囲みます。
フォントを複数指定（区切りは
,(カンマ)）した場合、左側のフォントが優先され、パソコンに
指定されたフォントがない場合、次のフォントが適用されます。
フォント名以外にも以下のフォント種類での指定もできます。
serif：明朝系フォント
sans-serif：ゴシック系フォント
cursive：筆記体など
fantasy：装飾的フォント
monospace：等幅フォント
記述例
--- CSSの記述 ---
/* フォントを変更する(半角スペース入りフォント名は""で囲む) */
H3{
font-family: "ＭＳ 明朝"
}
/* 左のフォントが優先。指定されたフォントがない場合、次のフォントが適用 */
P{
font-family: HG創英角ﾎﾟｯﾌﾟ体,"ＭＳ Ｐゴシック",sans-serif
}
--- HTMLの記述 ---
<H3>ABCDEFG</H3>
<P>HIJKLMN</P>
ブラウザで表示
★フォントの太さを指定する
書式 font-weight:太さの指定
数値での指定：100 200 300 400 500 600 700 800 900
名前による指定
normal：標準(400と同様)
bold：太字(700と同様)
lighter：相対的に１段階細くする
bolder：相対的に１段階太くする
記述例
--- CSSの記述 ---
/* フォントの太さを数値で指定*/
P{
font-weight:800
}
/* フォントの太さを名前で指定 */
DIV{
font-weight:bold
}
--- HTMLの記述 ---
<P>あいうえお</P>
<DIV>かきくけこ</DIV>
ブラウザで表示
★フォントの大きさを指定する
書式 font-size:大きさの指定
単位と数値による指定：em ex px in cm mm pt pc
種類による指定
xx-small：極小
x-small：小
small：少し小さい
medium：標準
large：少し大きい
x-large：大きい
xx-large：極大
smaller：相対的に１段階小さい
larger：相対的に１段階大きい
記述例
--- CSSの記述 ---
/* フォントの大きさを数値と単位で指定*/
P{
font-size:12pt
}
/* フォントの大きさを種類で指定 */
.fsize2{
font-size:xx-large
}
--- HTMLの記述 ---
<P>ABCDEF</P>
<DIV class="fsize2">abcdef</DIV>
ブラウザで表示
★フォントを斜体にする
書式 font-style:斜体の指定
normal：標準（なにも指定しないのと同じ）
italic：イタリック
oblique：斜体
記述例
--- CSSの記述 ---
/* 斜体をnormalで指定 */
P{
font-style:normal
}
/* italic */
#ita2{
font-style:italic
}
--- HTMLの記述 ---
<P>あいうえお</P>
<DIV id="ita2">かきくけこ</DIV>
ブラウザで表示
★フォントに様々な指定をする
書式 font:指定
フォントに様々な指定をします。
指定可能なプロパティ（右側の○○の指定を入れる）
font-weight:○○
font-style:○○
※font-size:○○
※font-family:○○
line-height:○○
指定方法に順番があり、「font-weight」「font-style」が
最初で（順不同）、２番目に「font-size」、３番目に「line-height」、
４番目に「font-family」となります。
このうち「font-size」と「font-family」は省略することができません。
複数指定するときは半角スペースを区切りにします。
また「line-height」を指定するときは数値の前に/を付ける必要があります。(例 /1.5em)
記述例
--- CSSの記述 ---
/* 斜体 文字15pt フォントＭＳ 明朝 */
.pers1{
font:italic 15pt "ＭＳ 明朝"
}
/* 太字 文字大きめ 行間1.8em フォントHGP明朝E */
P.pers2{
font:bold xx-large /1.8em HGP明朝E
}
--- HTMLの記述 ---
<P class="pers1">あいうえお</P>
<P class="pers2">かきくけこ</P>
ブラウザで表示
