fontプロパティ

TOPページに戻る > CSS

fontプロパティ

fontのスタイルをまとめて指定できます
まとめて指定できるプロパティはfont-style、 font-variant、 font-weight、font-size、 line-height、 font-familyです
斜体、スモールキャピタル、太字、文字サイズ、行間、フォントの種類の値を一括で指定可能です

値を指定する順番があります
1番目	font-styleの値、font-variantの値、font-weightの値 この3つの中の順番は自由です
2番目	font-sizeの値とline-heightの値 line-heightの値を指定する場合は、2つの値の間に/を入れてください
3番目	font-familyの値 フォントの種類を指定

※style、variant、weight、line-heightの値は省略できます

使い方（書式）

セレクタ { font: style variant weight size/line-height family ; }                                    

値と値の間に半角空白を入れます。sizeの値とline-heightの値の間に/を入れてください

値の説明

セレクタ { font: 斜体 スモールキャピタル 太字 文字の大きさ/行間 フォントの種類 ; }                                    

省略した場合の例

セレクタ { font: size family ; }                                    

fontプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	する

プロパティの値	説明
font-styleの値 font-variantの値 font-weightの値 font-sizeの値 line-heightの値 font-familyの値	使ったプロパティの値を指定

実際の指定方法

フォント1

.hoge { font: bold 2em/1.2 "ＭＳ 明朝"; }  /* weight size line-height familyを指定 */

フォント2

.hoge2 { font: italic 2em "MS PGothic","Osaka"; }  /* style size 複数のfamilyを指定 */

フォント3　(省略した指定)

.hoge3 { font: 2em "MS PGothic"; }   /* size familyを指定（この二つは省略できません） */

html部分

<p class="hoge">フォント1<br>2行目</p>
<p class="hoge2">フォント2<br>2行目</p>
<p class="hoge3">フォント3<br>2行目</p>

実際の表示

フォント1
2行目

フォント2
2行目

フォント3
2行目