WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > font-family
font-family  文字 

フォントの種類を設定する。

このエントリーをはてなブックマークに追加

font-familyプロパティは、フォントの種類を指定する際に使用します。

フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

書式

font-family: フォント名・フォントの種類 ;
(例) font-family: "MS ゴシック",sans-serif ;

●フォント名で指定
*フォント名にスペースが含まれている場合は"~"や'~'で囲む。

●フォントの種類で指定


フォントの種類

sans-serif …ゴシック系のフォント
serif …明朝系のフォント
cursive …筆記体・草書体のフォント
fantasy …装飾的なフォント
monospace …等幅フォント

サンプルコード


<p style="font-family:'MS ゴシック';">あいうえおabcdABCD1234</p>
<p style="font-family:'ヒラギノ角ゴ Pro W3' ;">あいうえおabcdABCD1234</p>
<p style="font-family:'メイリオ','MS 明朝' ;">あいうえおabcdABCD1234</p>

あいうえおabcdABCD1234

あいうえおabcdABCD1234

あいうえおabcdABCD1234


フォントの種類で選択


<p style="font-family:sans-serif;">sans-serif : あいうえおabcdABCD1234</p>
<p style="font-family:serif;">serif : あいうえおabcdABCD1234</p>
<p style="font-family:cursive;">cursive : あいうえおabcdABCD1234</p>
<p style="font-family:fantasy;">fantasy : あいうえおabcdABCD1234</p>
<p style="font-family:monospace;">monospace : あいうえおabcdABCD1234</p>

sans-serif : あいうえおabcdABCD1234

serif : あいうえおabcdABCD1234

cursive : あいうえおabcdABCD1234

fantasy : あいうえおabcdABCD1234

monospace : あいうえおabcdABCD1234