タイポグラフィ（デザイン）
font-family
フォントの種類を指定します。
| value | description | |
|---|---|---|
<any font name> | フォントを指定する | |
sans | 明朝体のデフォルトフォントを指定する | A/あ |
sans-serif | ゴシック体のデフォルトフォントを指定する | A/あ |
monospace | 等幅のデフォルトフォントを指定する | A/あ |
Demo
sans-serif（ゴシック体）
あのイーハトーヴォのすきとおった風。 Almost before we knew it, we had left the ground.
serif（明朝体）
あのイーハトーヴォのすきとおった風。 Almost before we knew it, we had left the ground.
monospace（等幅）
あのイーハトーヴォのすきとおった風。 Almost before we knew it, we had left the ground.
<div class="wrapper">
<p class="title">sans-serif（ゴシック体）</p>
<p class="sans-serif">
あのイーハトーヴォのすきとおった風。 Almost before we knew it, we had left the ground.
</p>
</div>
<div class="wrapper">
<p class="title">serif（明朝体）</p>
<p class="serif">
あのイーハトーヴォのすきとおった風。 Almost before we knew it, we had left the ground.
</p>
</div>
<div class="wrapper">
<p class="title">monospace（等幅）</p>
<p class="code">
あのイーハトーヴォのすきとおった風。 Almost before we knew it, we had left the ground.
</p>
</div>
.sans-serif {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
sans-serif;
}
.serif {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.code {
font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
}
.title {
font-size: 14px;
color: rgba(175, 183, 194, 70%);
}
.wrapper + .wrapper {
margin-top: 16px;
}
概要
font-family: aa, bb;のように、利用するフォントをカンマ区切りで複数指定することができます。複数指定した場合、1 番目のフォントが適用されます。1 番目のフォントが端末に存在しない場合、2 番目、3 番目...のフォントが適用されます。
端末に存在するフォントは OS や環境によって異なるため、複数指定しておく場合が多いです。
注意事項
- フォント名に空白を含む場合、
"または'で囲む必要があります。（'Hiragino Kaku Gothic ProN'など）
総称フォント
serif（明朝体）,sans-serif（ゴシック体）,cursive（筆記体）,fantasy（装飾体）,monospace（等幅）の 5 つのフォント名は総称フォントと呼ばれます。総称フォントが適用された場合、ブラウザ標準のフォントが適用されます。通常、総称フォントをfont-familyの一番最後に指定します。 これはfont-familyで指定したフォントがどれも存在しなかった場合の保険として機能します。
Example
<p class="text">
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
hello, world normal text
</p>
.text {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
sans-serif;
}
関連
- Web フォントの利用
参照
- Web フォントの利用