<generic-family>
<generic-family> は CSS のデータ型で、 font 一括指定プロパティと font-family 個別指定プロパティで使用する一般的なフォントファミリーのキーワード値を表します。 <generic-family> はそのカテゴリーに属する 1 つ以上のローカルにインストールされたフォントを表します。
構文
<generic-family> = serif | sans-serif | monospace | cursive | fantasy | system-ui | ui-serif | ui-sans-serif | ui-monospace | ui-rounded | emoji | math | fangsong 値
<generic-family> は列挙型で、下記の一覧の値のいずれかを使用して指定します：
serif-
セリフは文字の大きなストロークの終わりに付けられた小さな行またはストロークです。 セリフフォントでは、グリフには仕上げのストロークがあり、終わりはフレア状または先細り状になっています。例えば、 Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、明朝体などが挙げられます。
sans-serif-
セリフのないフォントです。グリフのストロークの終わりは平坦で、装飾はありません。 サンセリフフォントの例として、Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L、ゴシック体などが挙げられます。
monospace-
すべてのグリフの幅は同じ固定幅です。 等幅フォントの例としては、Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console が挙げられます。
cursive-
筆記体フォントのグリフは一般的に、結合ストロークや イタリック体以上の他の筆記体の特徴を有しています。筆記体フォントの例としてあh、 Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery が挙げられます。
fantasy-
ファンタジーフォントは、主に文字の遊び心のある表現を含む装飾的なフォントです。ファンタジーフォントの例には、Papyrus、Herculanum、Party LET、Curlz MT、Harrington などがあります。
system-ui-
グリフは指定されたプラットフォームの既定ユーザーインターフェイスフォントから採られます。タイポグラフィの伝統は世界中で大きく異なるため、この一般的なファミリーは、他にきれいに割り当てられなかった書体のために提供されています。
ui-serif-
ユーザーインターフェイスの既定のセリフフォント。上記の
serifの定義を参照してください。 ui-sans-serif-
ユーザーインターフェイスの既定のサンセリフフォント。上記の
sans-serifの定義を参照してください。 ui-monospace-
ユーザーインターフェイスの既定の等幅フォント。上記の
monospaceの定義を参照してください。 ui-rounded-
ユーザーインターフェイスの既定の丸まった特徴を持つフォント。
math-
数式を表示するためのフォント、例えば上付きや下付き、複数の行をまたぐ括弧、入れ子式、明確な意味を持つ二重打ちグリフなど。
emoji-
絵文字のレンダリングに特化したフォント。
fangsong-
セリフ体の宋体と草書体の楷体の中間に位置する具体的な漢字スタイル設定。このスタイルは政府文書に多く用いられています。
例
この例では、 font-family プロパティの列挙値 <generic-family> のいくつかをデモしています。
HTML
<ul> <li class="serif">serif</li> <li class="sans-serif">sans-serif</li> <li class="monospace">monospace</li> <li class="cursive">cursive</li> <li class="fantasy">fantasy</li> <li class="system-ui">system-ui</li> </ul> CSS
ul { font-size: 1.5rem; line-height: 2; } .serif { font-family: serif; } .sans-serif { font-family: sans-serif; } .monospace { font-family: monospace; } .cursive { font-family: cursive; } .fantasy { font-family: fantasy; } .system-ui { font-family: system-ui; } 結果
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # generic-font-families |
関連情報
- このデータ型を使用するプロパティ:
font-familyとfont - CSS フォントモジュール