font【フォント】ショートハンドプロパティ
font-style【フォントスタイル】
font-variant【フォント変換】
font-weight【フォントの太さ】
font-stretch【フォントの伸縮】
font-size【フォントサイズ】
font-family【フォントファミリ】
line-height【行の高さ】
メモ 構文 関連
メモ
- font【フォント】:フォント用ショートハンドプロパティ
下記のプロパティを設定 - line-height【行の高さ】はフォントに関係なく単独で使用可
構文 (※記述方法)
| ショートハンドプロパティ | JavaScript 参照 (.style.font) |
|---|---|
| font: システムフォント以外を指定: <'font-size【フォントサイズ】'> 及び <'font-family【フォントファミリ】'> 必須 | [ [<'font-style'【フォントスタイル】> || <'font-variant'【フォント変換】> || <'font-weight'【フォントの太さ】> || <'font-stretch'【フォントの伸縮】> ]?<'font-size【フォントサイズ】'> [ / <'line-height'【行の高さ】> ]?<'font-family【フォントファミリ】'> ]| caption【コントロールのキャプション用フォント】 | icon【ラベルアイコン用フォント】 | menu【メニュー用フォント】 | message-box【ダイアログボックス用フォント】 | small-caption【小さいコントロールのラベル用フォント】 | status-bar【ウィンドウのステータスバー用フォント】 |
| フォントスタイル | JavaScript 参照 (.style.fontStyle) |
| font-style: | normal【標準】 | italic【イタリック体】 | oblique【斜体】 |
| <font-style【フォントスタイル】> | |
| フォント変換 | JavaScript 参照 (.style.fontVariant) |
| font-variant: | normal【標準】 | small-caps【小さい大文字に変換】 |
| <font-variant【フォント変換】> | |
| font-variant: small-caps 【小さい大文字に変換】例 | The quick brown fox jumps over the lazy dog → The quick brown fox jumps over the lazy dog |
| フォントの太さ | JavaScript 参照 (.style.fontWeight) |
| font-weight: | normal【標準の太さ】 | bold【太字】 | bolder【一段階太く】 | lighter【一段階細く】 | 100 ~ 900 (100単位) 【100:細い / 400:normal / 700:bold / 900:太い】 |
| <font-weight【フォントの太さ】> | |
| フォントの伸縮 | JavaScript 参照 (.style.fontStretch) |
| font-stretch: | normal【標準の幅】 | ultra-condensed【最も幅狭】 | extra-condensed【相当幅狭】 | condensed【幅狭】 | semi-condensed【少し幅狭】 | semi-expanded【少し幅広】 | expanded【幅広】 | extra-expanded【相当幅広】 | ultra-expanded【最も幅広】 |
| <font-stretch【フォントの伸縮】> | |
| フォントサイズ | JavaScript 参照 (.style.fontSize) |
| font-size: | <absolute-size【絶対サイズ】> | <relative-size【相対サイズ】> | 《length【長さ】》 | 《percentage【パーセンテージ】》 |
| <font-size【フォントサイズ】> | |
| <absolute-size【絶対サイズ】> | xx-small【とても小さいフォント】 | x-small【小さいフォント】 | small【少し小さいフォント】 | medium【標準フォント】 | large【少し大きいフォント】 | x-large【大きいフォント】 | xx-large【とても大きいフォント】 |
| <relative-size【相対サイズ】> | larger【少し大きいフォント】 | smaller【少し小さいフォント】 |
| 行の高さ | JavaScript 参照 (.style.lineHeight) |
| line-height: | normal【標準の高さ】 | 《number【数値】》 | 《length【長さ】》 | 《percentage【パーセンテージ】》 |
| <line-height【行の高さ】> | |
| フォントファミリ | JavaScript 参照 (.style.fontFamily) |
| font-family: | [<family-name【フォントファミリ名】> | <generic-family【総称フォントファミリ】> ] # |
| <font-family【フォントファミリ】> | |
| <family-name【フォントファミリ名】> | |
| <generic-family【総称フォントファミリ】> 選択肢が選択できない場合の代替 最終選択肢で引用符なし | serif【セリフ (飾りあり):"abciwABCIW"】 | sans-serif【サンセリフ (飾りなし) :"abciwABCIW"】 | cursive【草書体:"abciwABCIW"】 | fantasy【装飾的:"abciwABCIW"】 | monospace【等幅:"abciwABCIW"】 |