- HTML
26 font-familyプロパティ
font-familyプロパティ
文字の書体デザインの事をフォントと言います。フォントを変更するには、「font-familyプロパティ」を使用します。その値に使いたい「フォント名」を指定します。
例として、h1要素のフォントを「MS 明朝」に変えたいときは、次のように書きます。
複数のフォントの指定
フォント名を指定しても、Webページを見ている人のパソコンに指定したフォントが入ってない場合は、指定が反映されません。そのような場合に備えて、保険をかけて「複数のフォント」を指定しておくことができます。たとえば「MS 明朝」はMacではインストールされていないことが多いので、同じ明朝系の「Hiragino Mincho Pro」を指定します。指定する場合はカンマ(,)で区切って記述します。
複数指定した場合は、利用可能なフォントを前から順番に探して、あれば表示します。最後に「selif」という値がありますが、これは総称ファミリー名と言います。
総称ファミリー名
指定したフォントが全て無い場合の保険として、「総称ファミリー名」での指定があります。フォントの種類は無数にありますが、いくつかの系統に分類ができます。セリフ、サンセリフ、等幅、装飾、筆記体です。
font-familyの最後の値として、これらの中で最もイメージに近い総称ファミリー名を指定しておけば、パソコンにインストールされているフォントの中から、その系統に属したフォントが選択されて表示されるということになります。
このページのまとめ
- Webページのフォントを変更したい場合は、font-familyプロパティを使用する。
- フォント名を指定する際は、「文字の全角/半角」、「スペースの有無」、「スペースの全角/半角」を正確に記述しないと、指定が反映されないので注意が必要。
- font-familyは複数指定する事もできる。
- 最後の値に「総称ファミリー名」を入れることで、見る人のパソコンに指定のフォントがない場合の保険をかけることができる最後の値に「総称ファミリー名」を入れることで、見る人のパソコンに指定のフォントがない場合の保険をかけることができる