|
{font-family:書体名;}で文字の書体を変えることができます。
書体にはMSPゴシックやMSゴシックなどたくさんありますが
目的のフォントがOSにインストールされてないとブラウザでは指定した通りに
表示されません。従って目的のフォントがない場合に第2候補のフォント名を , で区切って
指定する必要があります。sans-serif,HGS創英角ﾎﾟｯﾌﾟ体,・・・・・
というように記述して下さい。
書体名にスペースが入ってる場合は書体名を""で囲います。
但し、外部ファイルではなく直接HTMLタグにCSSを記述する場合は
style=""のダブルクォーテーションマークとかぶらないように
書体名を'書体名'のようにシングルクォーテーションマークで
囲います。
また、フォントの種類で書体を指定することも可能です。
■ 指定できるフォントの種類
| 種類 | 説明 |
| serif | 明朝体系フォントで表示できます。 |
| cursive | 筆記体系フォントで表示できます。 |
| sans-serif | ゴシック体系フォントで表示できます。 |
| fantasy | 装飾系フォントで表示できます。 |
| monospace | 等幅系フォントで表示できます。 |
【ブラウザ表示】
明朝体系
筆記体系
ゴシック体系 ABCDE
装飾系
等幅系
ＭＳ Ｐゴシック
ソース
<p class="font1">明朝体系</p>
<p class="font2">筆記体系</p>
<p class="font3">ゴシック体系 ABCDE</p>
<p class="font4">装飾系</p>
<p class="font5">等幅系</p>
<p class="font6">ＭＳ Ｐゴシック</p>
外部ファイル
p.font1{font-family:serif;}
p.font2{font-family:cursive;}
p.font3{font-family:sans-serif,HGS創英角ﾎﾟｯﾌﾟ体;}
p.font4{font-family:fantasy;}
p.font5{font-family:monospace;}
p.font6{font-family:"ＭＳ Ｐゴシック";}
<body>～</body>に直接記入する場合
<p style="font-family:serif;">明朝体系</p>
<p style="font-family:cursive;">筆記体系</p>
<p style="font-family:sans-serif,HGS創英角ﾎﾟｯﾌﾟ体;">
ゴシック体系 ABCDE
</p>
<p style="font-family:fantasy;">装飾系</p>
<p style="font-family:monospace;">等幅系</p>
<p style="font-family:'ＭＳ Ｐゴシック';">ＭＳ Ｐゴシック</p>
他のフォントの表示例は下のページから確認できます。
フォント表
■ その他の項目
・
文字の大きさを変える
・
文字の色を変える
・
文字の太さを指定する
・
文字を斜めにする
・
小文字英字を大文字で表示
・
文字の表示位置を指定する
・
字下げをする
・
行間を指定する
・
文字、単語の間隔を空ける
・
文字に線を引く
・
小文字と大文字を入れ換える
・
上付き文字と下付き文字
スタイルシート一覧のページに戻る
|
