CSS font| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-06-21 css-reference

ページコンテンツ

▼fontCSS プロパティとは
▼ プロパティ font
▼実例コード 1
▼プロパティ定義と使用法
▼プロパティ値
▼サポートするデスクトップブラウザ対応・互換性
▼サポートするモバイルブラウザ対応・互換性

`font` CSS プロパティとは

トピック：要素のテキストコンテンツのスタイル、バリアント、太字、サイズ/行の高さ、フォントファミリを設定する事ができる font-style,font-variant,font-weight,font-size,line-height,font-familyの各フォントプロパティを一括指定で設定するための簡略化されたプロパティ

プロパティ `font`

実例コード 1

サンプルコードを試す

h1 {
font: bold 2.5em "Times New Roman", Times, serif;
}
p {
font: normal 1.2em Arial, Helvetica, sans-serif;
}

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定される。 (一括指定ではないプロパティを使用して設定された以前の値は上書きされる) font-stretch, font-size-adjust, font-kerning は、 font によって直接設定できなくても初期値に設定される

プロパティ定義と使用法

デフォルト値・初期値 :	以下の一括指定の各プロパティとして `font-style`: `normal` `font-variant`: `normal` `font-weight`: `normal` `font-stretch`: `normal` `font-size`: `medium` `line-height`: `normal` `font-family`: ユーザエージェントに依存する
適用対象 :	全要素。 `::first-letter` and `::first-line` にも適用される
継承 :	継承する
パーセンテージ :	以下の一括指定の各プロパティとして `font-size`:親要素の font-size `line-height`: 要素自身のフォントサイズ
メディア :	visual
`CSS Version`	`CSS1 ～`
計算値 :	以下の一括指定の各プロパティとして `font-style`: 指定値 `font-variant`: 指定値 `font-weight`: `bolder` および `lighter`を実際の値に変換して、指定されたキーワードまたは数値 `font-stretch`: 指定値 `font-size`: 指定通り。ただし相対的 length は絶対的 length に変換 `line-height`: パーセンテージか length を指定すると絶対的な値、それ以外は指定通り `font-family`: 指定値
JavaScript 構文	object.style.font="funWebref"
アニメーションの種類 :	以下の一括指定の各プロパティとして `font-style`: 個別 `font-variant`: 個別 `font-weight`: font weight `font-stretch`: font stretch `font-size`: length `line-height`: either number or length `font-family`: 個別
正規順序 :	形式文法における値の出現順
CSSの構文	`font: font-style, font-variant, font-weight, font-size/line-height, font-family \|caption \|icon \|menu \|message-box \|small-caption \|status-bar \|initial \|inherit;`

font shorthandプロパティを使用するときに満たさなければならない条件がいくつかあるこの条件が満たされない場合、プロパティは無効であり、完全に無視される。

次の値を含めなければならない
font-size,font-family
次の値は任意で含めることができる。
font-style,font-variant,font-weight,line-height
font-style, font-variant, font-weight は font-size よりも前になければならない
font-variant は CSS 2.1 で定義された値、つまり normal 及び small-caps のみ指定できる
line-height は font-size の直後に、 "/" で区切って、"14px/2" のように指定することができる。
font-family は指定される最後の値であることが、必要

font をシステムキーワードとして指定する場合は、 caption, icon, menu, message-box, small-caption, status-bar のうちの一つでなければならない

プロパティ値

プロパティ/値	説明
`font-style`	フォントスタイルを指定するデフォルト値は "normal"です。
`font-variant`	フォントバリアントを指定するデフォルト値は "normal"です。
`font-weight`	フォントの太さを指定するデフォルト値は "normal"です。
`font-size`/`line-height`	フォントサイズと行の高さを指定するデフォルト値は "normal"です。
`font-family`	フォントファミリを指定するデフォルト値はブラウザによって異なります
`caption`	キャプション付きのコントロール（ボタン、ドロップダウンなど）で使用されるフォントを使用します。
`icon`	アイコンラベルで使用されるフォントを使用します。
`menu`	ドロップダウンメニューで使用されるフォントを使用します。
`message-box`	ダイアログボックスで使用されるフォントを使用します。
`small-caption`	より小さなバージョンのキャプションフォント
`status-bar`	ステータスバーで使用されるフォントを使用します。
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

サポートするデスクトップブラウザ対応・互換性

Property	Desktop 互換性
font	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯1	フルサポート◯12	フルサポート◯1	フルサポート◯3	フルサポート◯3.5	フルサポート◯1
System fonts	フルサポート◯1	フルサポート◯12	フルサポート◯1	フルサポート◯4	フルサポート◯6	フルサポート◯1
`font-stretch`値のサポート	フルサポート◯あり	不明	フルサポート◯43	不明	不明	不明

サポートするモバイルブラウザ対応・互換性

Property	Mobile 互換性
font	Android	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
基本サポート	フルサポート◯あり	フルサポート◯あり	フルサポート◯あり	フルサポート◯4	フルサポート◯あり	フルサポート◯あり	フルサポート◯あり
System fonts	不明	不明	不明	不明	不明	不明	不明
`font-stretch`値のサポート	不明	不明	不明	フルサポート◯43	不明	不明	不明

：font 関連記事

CSS font| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル — CSS font | CSS プロパティ値| 意味使い方実例 – WebRef

タグ:

#CSS フォント
#CSS プロパティ