ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テキスト

文字の書体を指定する

{font-family:書体名;}で文字の書体を変えることができます。

書体にはMSPゴシックやMSゴシックなどたくさんありますが目的の フォントがOSにインストールされてないとブラウザでは指定した通りに 表示されません。従って目的のフォントがない場合に第2候補のフォント名を , で区切って 指定する必要があります。sans-serif,HGS創英角ポップ体,・・・・・ というように記述して下さい。
書体名にスペースが入ってる場合は書体名を""で囲います。 但し、外部ファイルではなく直接HTMLタグにCSSを記述する場合は style=""のダブルクォーテーションマークとかぶらないように 書体名を'書体名'のようにシングルクォーテーションマークで 囲います。
また、フォントの種類で書体を指定することも可能です。

■ 指定できるフォントの種類

種類説明
serif明朝体系フォントで表示できます。
cursive筆記体系フォントで表示できます。
sans-serifゴシック体系フォントで表示できます。
fantasy装飾系フォントで表示できます。
monospace等幅系フォントで表示できます。

【ブラウザ表示】

明朝体系

筆記体系

ゴシック体系 ABCDE

装飾系

等幅系

MS Pゴシック


ソース

<p class="font1">明朝体系</p>
<p class="font2">筆記体系</p>
<p class="font3">ゴシック体系 ABCDE</p>
<p class="font4">装飾系</p>
<p class="font5">等幅系</p>
<p class="font6">MS Pゴシック</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:"MS Pゴシック";}


<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:'MS Pゴシック';">MS Pゴシック</p>

他のフォントの表示例は下のページから確認できます。

フォント表

■ その他の項目

文字の大きさを変える
文字の色を変える
文字の太さを指定する
文字を斜めにする
小文字英字を大文字で表示
文字の表示位置を指定する
字下げをする
行間を指定する
文字、単語の間隔を空ける
文字に線を引く
小文字と大文字を入れ換える
上付き文字と下付き文字

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.