フォントファミリーを指定する

CSS - font-family

概要

CSSプロパティ「font-family」は、フォントの種類を指定することができます。フォントの種類はカンマで区切って複数指定することができ、最上位から優先されます。これは、閲覧するユーザーの環境で利用可能なフォントが異なっている為で、候補を多く用意しておくことで開発者が意図するフォントで表示することができるからです。

<p class="font-family">フォントファミリーを指定します</p>
<style>
.font-family {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
}
</style>

また [csssp]@font-face[/cssp] を使ってwebフォントを使用するケースも昨今では増えてきています。これは、webサーバー上のフォントを読み込んで表示させるので、指定フォントがない場合でも様々なデバイスで同じ表示をさせることができます。

値の指定方法

{ font-family: 値, 値, ...}

間に半角スペースの入るフォント名はクォーテーション(もしくはダブルクォーテーション)ではさみこみます。

説明
フォント名'MS PGothic' などフォント名を指定します
キーワードsans-serifなどの総称フォントファミリーを指定します

総称フォントファミリーの指定

総称フォントファミリーを指定しておくと、指定したフォントファミリーが一切入っていないブラウザで閲覧された場合に、ブラウザの解釈によって、その系統のフォントを判別して表示されます。この総称フォントファミリーは以下のような種類があります。

プロパティの種類について

「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名説明
fontフォントに関する指定をまとめて行うショートハンドプロパティ
font-styleフォントのスタイルを指定する
font-variantフォントのスモールキャップ指定する
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする

使用例

基本的にフォント指定はページ全体で指定しますので以下のようにbodyに指定することが多いでしょう。

<p>フォントファミリーを指定します</p>
<style>
body {
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'
}
</style>

仕様書

関連CSSプロパティ