font プロパティ
font プロパティは、font-style、font-variant、font-weight、font-size / line-height、font-family プロパティを一括指定するプロパティです。
使用するフォントは font-family で指定できますが、指定フォントが使用できるかはユーザーのブラウザの環境に依存します。ユーザーの OS に指定フォントが入っていないと代替えフォントで表示されます。
font: normal normal normal medium/normal serif;
フォントの色指定には color プロパティを使います。
ページ内 Index
構文(Syntax)
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 ;
DOM ( JavaScript )
String = object.style.font;
object.style.font=" font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| font-style | 文字のスタイル |
| font-variant | スモールキャップの有無 |
| font-weight | 太さ |
| font-size / line-height | 大きさ/行間 |
| font-family | フォントファミリ |
| caption | キャプション用システムフォント |
| icon | ラベルアイコン用システムフォント |
| menu | メニューに使われるシステムフォント |
| message-box | ダイアログボックス用システムフォント |
| small-caption | キャプションでも小さいシステムフォント |
| status-bar | ウィンドウのステータスバー用システムフォント |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | normal normal normal medium/normal (ブラウザによる) |
| 継承（Inherited） | Yes |
| CSS Animation | Yes |
Example
font の例です。font-family 以外はデフォルト値です。font-family は ”serif” に指定しています。
関連 CSS プロパティ
関連するプロパティに以下があります。
| font | fontに関するプロパティの一括指定 |
| font-family | フォントファミリ |
| font-feature-settings | OpenTypeフォントのもつ文字体裁機能を指定 |
| font-kerning | フォント間の字詰め（文字間隔） |
| font-size | 大きさ |
| font-stretch | フォントの表示幅 |
| font-style | 文字のスタイル |
| font-variant | スモールキャップの有無 |
| font-variant-caps | スモールキャップの有無 |
| font-weight | 太さ |
テキストに関するプロパティには以下があります。
| プロパティ | 概要 |
|---|---|
| line-height | 行間 |
| text-align、vertical-align | テキストの配置操作 |
| background{ linear-gradient() } | マーカーでラインを引いたような装飾 |