bodyにfont-familyの設定をしていて、h1にfont-familyの設定をする時は差分だけ設定すればで良い？

Question

質問

font-familyの設定が既に定義されているものを後から定義したものが丸々上書きするのか、それとも、上書きはせずに差分だけ設定してくれるのかが知りたいです。

例えば、bodyで以下のようにfont-familyの設定をしているとします。

body {
  font-family: "Helvetica Neue", Arial, Meiryo, sans-serif;
}

そして、h1ではGoogle Fontからimportした'Gorditas'というフォントを使いたいとします。

この時なのですが、以下のように差分だけ設定すれば良いのでしょうか？

h1 {
  font-family: 'Gorditas'
}

それとも、以下のように既存の定義の前に適用したいフォントファミリーを入れて設定するのでしょうか？（この場合、font-familyは既に定義されているものを全部上書きするということになる？）

h1 {
  font-family: 'Gorditas', "Helvetica Neue", Arial, Meiryo, sans-serif;
}

上記の例はGoogle fontを用いた例なので、読み込みに失敗するケースがあるかどうかは定かではないですが、仮にあるとした場合、font-familyの設定が既に定義されているものを後から定義したものが丸々上書きするのか、それとも、上書きはせずに差分だけ設定してくれるのかが知りたいです。

ご教示頂けると大変嬉しいです。よろしくお願いいたします！

Answer 1

この場合、font-familyは既に定義されているものを全部上書きするということになる？

そのとおりです。font-family: 'Gorditas'とだけ書いた場合、書いたとおりに'Gorditas'だけの指定になります。

上記の例はGoogle fontを用いた例なので、読み込みに失敗するケースがあるかどうかは定かではないですが

欧文用フォントで和文文字を出そうとしたなど、文字が足りないときにはそれ以降の指示も読み込まれます。

Comments

[murabito]

ありがとうございます。つまり、フォールバックのフォントファミリーも後からフォントファミリーを別要素やクラスに設定する時は、指定してあげる必要があるということなのですね。