CSSでフォントを指定する方法

今回はCSSでフォントを指定する方法を説明します。
フォント一つでサイトの印象が大きく変わります、実際の業務でも必要になるので、覚えておきましょう。

フォントを指定する書き方

実際にCSSでフォントを指定する方法を説明していきます。
フォントの指定には「font-family」というプロパティを使います。
また、フォントの指定には「フォントファミリ名」で指定する方法と
「総称ファミリ名」で指定する方法があります。
まず、フォントファミリ名での指定方法を説明します。

【書き方について】

p{
  font-family: "MS Pゴシック";
}

⬆︎上記のように書くことでフォントを指定することができます。
フォントの指定もWebページの制作において大事な要素の一つになります。

また、候補としていくつか設定することができます。

font-family: 候補1,候補2,候補3;

上記のように”,”(カンマ)で区切って複数の候補を設定することで、候補1が使えない時、候補2のフォントを適用します。候補2が適用できない時は候補3を適用し、それを繰り返します。
また、「cursive」を指定して日本語のテキストを表示しようとすると、一部環境ではそのテキストが正常に表示されないこともあるようです。

一点注意しておきたいこととして、フォント名を指定していても、利用している環境にそのフォントがインストールされていなければ指定したフォントでの表示はされません。
(ただWEBフォントを使用すれば端末にインストールされたフォントに左右されずに表示できます、WEBフォントについては次回以降の記事で紹介します。)
直接のフォントの指定をしてもいいですが、最後の候補に「総体ファミリ名」を入れるようにすると良いです。

総称ファミリ名とは？

p{
font-family: "MS Pゴシック","arial black","arial narrow","sans-serif";
}

総称ファミリ名のイメージは「最後の砦」です。
もしページを開いた際にパソコンに指定したフォントが全く入っていなかった場合に
最後に指定しておきます。上記の黄色いマーカーが総称ファミリ名になります。

また、総称ファミリ名で指定する方法では、次の5種類で指定することができます。

「sans-serif」 ・・・ ゴシック体系のフォント
「serif」 ・・・ 明朝体系のフォント
「cursive」 ・・・ 筆記体系のフォント
「fantasy」 ・・・ 装飾系のフォント
「monospace」 ・・・ 等幅系のフォント

ほぼ全てのウェブサイトが総称フォントファミリーとして「sans-serif」と「serif」のどちらかを指定しています。
ゴシック体系のフォントを使いたいのであれば「sans-serif」を、明朝体系のフォントを使いたいのであれば「serif」を指定すると良いでしょう。

実際にフォントを指定する方法

【HTML】

<html>
  <head>
    <meta charset="utf-8">
    <title>cybergreen</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <p class="font1">Fate/stay night　Unlimitied Blade Works　(fantasy)</p>
    <p class="font2">Fate/Zero (sans-serif)</p>
    <p class="font3">Fate/Apocrypha (cursive)</p>
  </bod>
</html>

【CSS】

p.font1{
  font-family: fantasy;
}

p.font2{
  font-family: sans-serif;
}

p.font3{
  font-family: cursive;
}

【ブラウザ表示例】

Fate/stay night　Unlimitied Blade Works　(fantasy)

    
Fate/Zero (sans-serif)

    
Fate/Apocrypha (cursive)

⬆︎上記の用にしたフォントに変わりました。

最後に・・・

以上、CSSでフォントを指定する方法を解説しました。
2つの段落に異なったフォントを設定できたり、サイトの雰囲気をフォントで変えることができるので便利です。
使う機会があると思うので使ってみてください。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, , ,