font-familyの書体一覧
ここではCSSプロパティfont-familyで指定できるフォントの書体一覧について解説していきます。フォントの書体には大きく5つの種類があります。
font-familyの5つの種類
フォントの5つの種類には以下のようなものがあります。またfont-familyに与える値としてフォント名にスペースがある場合引用符(")で囲む必要があります。また閲覧している側に指定したフォントがなかった場合に備えて複数のフォントを(,)で区切って与えることもできます。
CSSプロパティ | 解説 |
font-family | フォントの種類 |
font-familyの種類 | 解説 |
serif | 飾りつきのフォント |
sans-serif | 飾りなしのフォント |
monospace | 等幅のフォント |
fantasy | 装飾的なフォント |
cursive | 筆記体のフォント |
各種類の書体サンプルは以下のようになります。
指定なし | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
serif | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Century" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Estrangelo Edessa" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Gungsuh" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Shruti" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
指定なし | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
sans-serif | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Arial" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Arial Black" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Impact" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Century Gothic" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
指定なし | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
monospace | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"HG行書体" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"MS ゴシック" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"MS 明朝" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"BatangChe" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
指定なし | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
fantasy | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Modern" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Monotype Corsiva" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
指定なし | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
cursive | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"HGP行書体" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"HG正楷書体-PRO" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Comic Sans MS" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
"Script" | あいうえお 春夏秋冬 ABCDEFG abcdefg 0123456789 |
CSS文字 関連記事
- 文字色 … color
- 書体を設定する … font-family
- font-familyの書体一覧 … font-family
- 文字の大きさ … font-size
- 文字の太さ … font-weight
- 文字の間隔 … letter-spacing
- 文章の位置 … text-align
- 文章を縦書きで表示する … writing-mode
- 行間を調整する … line-height
- 文字に影をつける … text-shadow