font-familyプロパティ

TOPページに戻る > CSS

スポンサード リンク

font-familyプロパティ

テキストの書体を指定できます
font-familyで指定するフォントは閲覧者のパソコンに入っているフォントを利用しています
閲覧者のパソコンに入っていないフォントを指定しても書体は変わりません。
その場合はブラウザのデフォルトのフォントで表示されます

使い方(書式)
セレクタ { font-family: sans-serif; }/* 決められた値の場合はダブルクォートで囲わない */  

セレクタ { font-family: "フォント名"; }/* 半角空白がフォント名に含まれている場合は
                                           ダブルクォートかシングルクォートで囲む */                                     
                                           

font-familyプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 する

プロパティの値 説明
serif 明朝体
sans-serif ゴシック体
cursive 筆記体
fantasy 装飾文字
monospace 等幅フォント
フォント名 MS 明朝など、フォントを指定した場合の値
ダブルクォートかシングルクォートで囲む

実際の指定方法

セレクタ { font-family: "MS PGothic"; } /* 半角空白がフォント名に含まれている場合は
                                           ダブルクォートかシングルクォートで囲む */

font-familyの値は複数のフォントを適用できます

OSによって使えるフォントが異なるのでその対応として、複数のフォントを指定しておくとOSごとに表示できるフォントを適用できます
複数のフォントを指定する場合はカンマで区切って指定します
p { font-family: "MS 明朝","Osaka",Arial,sans-serif; } /* 4つのフォントを指定 */ 

html部分

<p>フォント</p>

実際の表示

フォント

フォント(こちらがデェフォルトのフォント)


標準的なフォントの指定

標準ってゆうのはないのかもしれないんでしょうけど一応、無難な指定
例.
p { font-family: "MS PGothic","Osaka",Arial,sans-serif; }

CSS3のWEBフォント

CSS3のWEBフォントを設定してあると、font-familyプロパティでWEBフォントを使うことができます
詳細はCSS3の解説ページで


(C)2012 ホームページ作成無料