お問い合わせ
  • HTML

26 font-familyプロパティ

font-familyプロパティ

文字の書体デザインの事をフォントと言います。フォントを変更するには、「font-familyプロパティ」を使用します。その値に使いたい「フォント名」を指定します。

font-familyプロパティ1

例として、h1要素のフォントを「MS 明朝」に変えたいときは、次のように書きます。

font-familyプロパティ2

複数のフォントの指定

フォント名を指定しても、Webページを見ている人のパソコンに指定したフォントが入ってない場合は、指定が反映されません。そのような場合に備えて、保険をかけて「複数のフォント」を指定しておくことができます。たとえば「MS 明朝」はMacではインストールされていないことが多いので、同じ明朝系の「Hiragino Mincho Pro」を指定します。指定する場合はカンマ(,)で区切って記述します。

複数のフォントの指定

複数指定した場合は、利用可能なフォントを前から順番に探して、あれば表示します。最後に「selif」という値がありますが、これは総称ファミリー名と言います。

総称ファミリー名

指定したフォントが全て無い場合の保険として、「総称ファミリー名」での指定があります。フォントの種類は無数にありますが、いくつかの系統に分類ができます。セリフ、サンセリフ、等幅、装飾、筆記体です。
font-familyの最後の値として、これらの中で最もイメージに近い総称ファミリー名を指定しておけば、パソコンにインストールされているフォントの中から、その系統に属したフォントが選択されて表示されるということになります。

このページのまとめ

  • Webページのフォントを変更したい場合は、font-familyプロパティを使用する。
  • フォント名を指定する際は、「文字の全角/半角」、「スペースの有無」、「スペースの全角/半角」を正確に記述しないと、指定が反映されないので注意が必要。
  • font-familyは複数指定する事もできる。
  • 最後の値に「総称ファミリー名」を入れることで、見る人のパソコンに指定のフォントがない場合の保険をかけることができる最後の値に「総称ファミリー名」を入れることで、見る人のパソコンに指定のフォントがない場合の保険をかけることができる

Contact Us

Web制作、Webマーケティング、SFA・MA導入支援に関するお悩みがある方は、お気軽にご相談ください。

お問い合わせ・ご相談

ホームページ制作、マーケティングにおける
ご相談はお気軽にご連絡ください。

資料請求

会社案内や制作事例についての資料を
ご希望の方はこちらから。

お電話でのお問い合わせ

お電話でのご相談も受け付けております。

※コールセンターに繋がりますが、営業時間内は即日
担当より折り返しご連絡をさせて頂きます。