font【フォント】ショートハンドプロパティ
font-style【フォントスタイル】
font-variant【フォント変換】
font-weight【フォントの太さ】
font-stretch【フォントの伸縮】
font-size【フォントサイズ】
font-family【フォントファミリ】
line-height【行の高さ】

メモ

  • フォント用ショートハンドプロパティ (fontフォント】)
  • 下記のプロパティを設定
    • font-styleフォントスタイル
    • font-variantフォント変換
    • font-weightフォントの太さ
    • font-stretchフォントの伸縮
    • font-sizeフォントサイズ
    • font-familyフォントファミリ
    • line-height行の高さ
  • 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"

関連