【CSS講座】STEP4: 文字の種類は「font-family」で変更しよう!

ではCSSを使って、文字の種類を変更する方法を紹介します。

こちらの例文を見てください。

文字の種類の変え方

1. 以前のSTEPでやったように、上の文字にある「ハンバーグが好き」の上でメニュー「検証」を選択します。

2. 出てきたウィンドウにあるCSSの「font-family」で文字の種類を変えます。

   
   .ex span {
   font-size: 20px;
   color: ■red;
   font-weight: bold;
   font-family: "ＭＳ ゴシック",sans-serif;
   }
   

   「"ＭＳ ゴシック",sans-serif」「"ＭＳ 明朝",serif」にしてみましょう。文字が「明朝体」になります。

   以下も試してみてください。

   ゴシック体	"ＭＳ ゴシック",sans-serif
   明朝体	"ＭＳ 明朝",serif
   ヒラギノ角ゴ Pro	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"
   メイリオ	"メイリオ", Meiryo
   游ゴシック	"游ゴシック" , "Yu Gothic"

   このフォントはあくまでPCに入っているフォントを読み込みます。なので、そのPCに指定したフォントがなければ初期状態のままです。以下をご参考に。

   • 「メイリオ」はWindows Vista以降から
   • 「ヒラギノ角ゴ Pro」はMac OS X以降から
   • 「游ゴシック」は、Windows8.1以降、MacOS10.9以降から

ご注意ください!

「font-family」はむやみやたらと変えるのはオススメしません。あくまでやり方を知っておくだけで大丈夫です。

大抵の場合、以下のように一箇所（body { } ）で全フォントの指定を1回だけやります。

※たくさんのフォントが連なっているのは、優先順位が高い順です。もし一番前のフォントがPCに入っていない場合は、次に記述されているフォントを読み込みます。

【STEP5】文字の間隔を変える

← 前のページ

CSSの基本はこちらです

CSSの基本についてはこちらの記事にまとめています。