「font-family」プロパティは、
「フォント」を指定することができる「CSSプロパティ」。

「font-family」プロパティでは、
「フォントファミリー名」と「総称フォントファミリー名」で指定します。

指定で使用する「フォントファミリー」は、
アルファベットならば「A-Z」「0−9」をまとめたもの。

「総称フォントファミリー」は、
似ている「フォントファミリー」をまとめたもの。

「font-family」プロパティで、
フォントを指定するのは簡単だが、
いくつか指定する時のルールがあるので注意が必要。

使用したい「フォントファミリー」を指定する場合は、
使用できなかったことを考え、
「総称フォントファミリー名」も一緒に指定するのが大切。

INDEX

■ 「font-family」プロパティの使い方

■ 「font-family」プロパティの書式
■ 「font-family」の値

■ Gallery

「font-family」プロパティの使い方

「font-family」プロパティは、
「フォント」を指定できる「CSSプロパティ」で、
「フォントファミリー名」や「総称ファミリー名」の優先順位リストを指定することができる。

「フォントファミリー名」は、
通称「フォント」と呼ばれ、
アルファベットなら「A〜Z」のフォントをまとめたものをいう。

「総称ファミリー」は、
字のデザインが似ている「フォントファミリー」を複数集めた集合体です

・「A」＝「フォント」
・「A〜Z」「０〜９」＝「フォントファミリー」
・複数の「フォントファミリー」＝「総称ファミリー」

「font-family」プロパティの書式

「font-family」プロパティの指定方法（記述方法）には、
少しルールがあります。

「font-family」プロパティの指定ルールは、

・複数のフォントを指定する場合は、「,（カンマ）」で区切る。
・「フォント名」に「スペース（空白）」が含まれる場合は、「""」で囲む。
・指定フォントがない場合に備え、「総称ファミリー」を１つは入れておく。
・最初に指定するフォントが1番優先順位が高い。

などがあります。

■ フォントファミリー名と総称ファミリー名の指定方法

font-family: フォントファミリー名, 総称ファミリー名;
font-family: "空白のあるフォントファミリー名", sans-serif;
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

「フォントファミリー名」を指定するときは、
使用できなかった時のために、
必ず「総称ファミリー名」を指定する。

■ 「/総称ファミリー名」の指定方法

font-family: 総称ファミリー名;
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

■ 「グローバル値」の指定方法

font-family: inherit;
font-family: initial;
font-family: revert;
font-family: unset;

「font-family」の値

値	説明
family-name	「フォントファミリー名」を指定する値。空白を含むフォントファミリー名は、引用符「""」で囲む必要がある。
generic-name	「総称フォントファミリー名」を指定する値。指定された「フォントファミリー」が利用できなかった場合、総称ファミリーの中のフォントをシステムが選択し適用する。引用符「""」で囲まない。囲んではいけません。総称フォントファミリーは、フォントファミリー名リストの最終選択肢である必要があります。定義されているキーワードは、下記の「generic-name（総称フォントファミリーの種類）」でご確認ください。


generic-name（総称フォントファミリーの種類）
総称フォントファミリー	説明
serif	終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。例: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif
sans-serif	平たい角の端を持つ字形です。例: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.
monospace	すべての字が同じ幅を持つ字形です。例: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace
cursive	筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。例: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive
fantasy	fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy
system-ui	指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。
ui-serif	ユーザーインターフェイス既定のセリフ付きフォントです。
ui-sans-serif	ユーザーインターフェイス既定のセリフなしフォントです。
ui-monospace	ユーザーインターフェイス既定の等幅フォントです。
ui-rounded	ユーザーインターフェイス既定の丸い特性を持ったフォントです。
math	これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。
emoji	絵文字を表示するために特別にデザインされたフォントです。
fangsong	セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。

Back