cssのfont-familyでフォントの種類を指定する方法

フォント名で指定する方法

フォント名を指定する方法は「MS 明朝」「MS ゴシック」のようにフォント名で指定する方法、「serif」のようにキーワードで指定する方法の2種類あります。

フォント名で指定する場合は「'ＭＳ 明朝'」のように「'」シングルクォーテーション、または「"」ダブルクォーテーションで囲む必要があります。 ちなみにフォント名にスペースが空いている場合のみ、囲むようにしましょう。

例えば「ＭＳ」と「明朝」の間にスペースが空いてますよね。こんな時は囲みましょう。

.example{
  font-family: 'ＭＳ 明朝', serif;
}

表示例

ＭＳ 明朝（表示例）

指定できるフォント名の種類は、下のページで紹介しています。

キーワード(総称ファミリー)で指定する方法

キーワードでフォントを指定する場合は、「"」「'」といった引用符は必要ありません。 キーワード（総称ファミリー）で指定できるフォントの種類は下のようになってます。

.example{font-family: sans-serif;}
.example{font-family: serif;}
.example{font-family: cursive;}
.example{font-family: fantasy;}
.example{font-family: monospace;}

表示例

sans-serif （ゴシック系フォント）

serif（明朝系フォント）

cursive（筆記体・草書体）

fantasy （装飾的フォント）

monospace（等幅フォント）

英語フォント（欧文フォント）から指定

テキストの日本語の部分と英語の部分をそれぞれ違うフォントにしたい！って時ありますよね。 そういう時は、font-familyプロパティに英語フォントから先に記述していきます。

body{
     font-family: Helvetica , "游ゴシック体" , "Yu Gothic" , sans-serif;
}

上のように英語フォント（Helvetica）を日本語フォント（游ゴシック体）より先に指定する事で、テキストの英語部分は「Helvetica」、日本語部分は「游ゴシック体」で表示されるようになります。 ちなみに日本語フォントを先に指定した場合は、テキストの英語・日本語の部分どちらも日本語フォント（上の場合で言えば’游ゴシック体’）で表示されます。

なんでそうなるかというと、日本語フォントには半角英数字も含まれているから。 つまり日本語フォントだけで英語・日本語の部分どちらも対応しちゃうってことです。

なので日本語と英語でフォントを分けて指定したい時は、先に英語フォントから記述しましょう！

pcにインストールされているフォントを把握しておく

pcのos（ソフトウェア）によってインストールされているフォントの種類が違います。

例えばウィンドウズ8.1から搭載されたフォントもあれば、ウィンドウズ7から搭載されたフォントもあります。 なのでどのフォントを優先させるか決めるためにも、どのosから搭載されているのかを知っておいた方が良いです。

総称フォントファミリーを記述しておこう

font-familyプロパティでフォントを指定する時は、最後に総称フォントファミリーを記述しましょう！ 総称フォントファミリーというのは、下のようなものになります。

body{
     font-family: Helvetica , "游ゴシック体" , "Yu Gothic" , sans-serif;
}

上のような感じで一番最後に総称フォントファミリーを記述しときましょう。 こうする事で指定したフォントが表示されなくても、同じような系統のフォントを表示することができます。

上でいえば「游ゴシック体・Yu Gothic」はゴシック系のフォントですよね。 そして総称ファミリーの「sans-serif」もゴシック系のフォントです。 なので「游ゴシック体・Yu Gothic」が万が一表示されなくても、指定したフォントにある程度近い形のフォントが表示できるわけです。

注意点は大体こんな感じです！！

font-familyを変えるだけでホームページやブログの印象がかなり変わるので、ぜひ色々試してみて下さいね。