【CSS】font-family - 文字の書体

CSSのfont-familyプロパティについて解説します。

検証環境

CSS

macOS

14.1

font-family

font-familyは“文字の書体”のプロパティです。

font-family: 値;

複数書体の指定はカンマ（,）で区切ります。

font-family: 値, 値, 値;

値が複数ある場合、左から優先して書体の適用可否を判定します。

可能な場合は適用し、不可の場合は次の書体を検証します。

書体はWebブラウザに標準で入っているものがあり、次の書体は多くのWebブラウザで利用可能です。

また、Webブラウザに存在しない書体でも、リソースを用意し、読み込むことで利用できます。

文字の書体をserifに設定するサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    font-family: serif;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

複数の書体を設定するサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    font-family: "TEST", serif;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

"TEST"という書体は存在しないため、serifが適用されます。