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"】 |