[CSS] [HTML] スタイルシートによるフォントの変更 - フォントやフォントファミリーを変更する

このページのタグ:[CSS] [HTML]
スタイルシートで文字のフォントを変更するコードを紹介します。
フォントを変更する場合はfont-familyプロパティを設定します。

フォントファミリーのキーワードで指定する場合

フォントファミリーを示すキーワードでフォントファミリーを指定できます。キーワードは以下があります。

フォントファミリーを示すキーワード

キーワード説明
sans-serifゴシックスタイルのフォントファミリーです
serifひげのついた書体や明朝スタイルのフォントファミリーです
cursive筆記体や草書体などの手書きスタイルのフォントファミリーです
fantasy草食系のフォントファミリーです
monospace等幅フォントファミリーです

コード

StyleFontFamily.css


.Serif {
  font-family:serif;
}

.SansSerif {
  font-family:sans-serif;
}

.Monospace {
  font-family:monospace;
}

.Fantasy {
  font-family:fantasy;
}

.Cursive {
  font-family:cursive;
}

StyleFontFamily.css


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="StyleFontFamily.css" />
</head>
<body>
    <div class="Serif">Penguinは空を飛べない</div>
    <div class="SansSerif">Penguinは空を飛べない</div>
    <div class="Monospace">Penguinは空を飛べない</div>
    <div class="Fantasy">Penguinは空を飛べない</div>
    <div class="Cursive">Penguinは空を飛べない</div>

</body>
</html>

表示結果

上記のHTMLファイルを表示すると下図の結果となります。
フォントの書体が変更されていることが確認できます。

フォント名を指定する場合

フォント名を指定する場合はフォント名を「"」または「'」で囲んで指定します。

コード例

StyleFontFamilyName.css


.FontMSMin {
  font-family:"MS 明朝";
}

.FontMSGot {
  font-family:"MS ゴシック";
}

.FontMeiryo {
  font-family:"メイリオ";
}

.FontMSPMin {
  font-family:"MS P明朝";
}

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

.FontMSGotUI {
  font-family:"MS UI Gothic";
}

.FontMeiryoUI {
  font-family:"Meiryo UI";
}

CssFontFamilyName.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" href="StyleFontFamilyName.css" />
</head>
<body>
    <div class="FontMSMin">シロクマは北極圏(Arctic Region)に生息しています。</div>
    <div class="FontMSGot">シロクマは北極圏(Arctic Region)に生息しています。</div>
    <div class="FontMeiryo">シロクマは北極圏(Arctic Region)に生息しています。</div>
    <hr />
    <div class="FontMSPMin">シロクマは北極圏(Arctic Region)に生息しています。</div>
    <div class="FontMSPGot">シロクマは北極圏(Arctic Region)に生息しています。</div>
    <div class="FontMSGotUI">シロクマは北極圏(Arctic Region)に生息しています。</div>
    <div class="FontMeiryoUI">シロクマは北極圏(Arctic Region)に生息しています。</div>
</body>
</html>

表示結果

上記のHTMLファイルを表示すると下図の画面が表示されます。スタイルシートに設定したフォントで文字が描画されています。

補足

Windows Macで使える欧文フォント

Window,Macで共通に利用できる欧文フォントは以下があります。
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

コード例

下記コードを記述します。

StyleFontFamilyLatin.css


.Arial {
  font-family:"Arial";
}

.ArialBlack {
  font-family: "Arial Black";
}

.ComicSansMS {
  font-family: "Comic Sans MS";
}

.CourierNew {
  font-family: "Courier New";
}

.Georgia {
  font-family:"Georgia";
}

.Impact {
  font-family:"Impact";
}

.TimesNewRoman {
  font-family:"Times New Roman";
}

.TrebuchetMS {
  font-family:Trebuchet MS;
}

.Verdana {
  font-family:Verdana;
}

CssFontFamilyLatin.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="StyleFontFamilyLatin.css" />
</head>
<body>
  <table>
    <tr>
      <td>Arial</td>
      <td><div class="Arial">HyperText Markup Language (HTML) is the main markup language.</div></td>
    </tr>
  <tr>
    <td>Aria lBlack</td>
    <td><div class="ArialBlack">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
  <tr>
    <td>Comic Sans MS</td>
    <td><div class="ComicSansMS">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
  <tr>
    <td>Courier New</td>
    <td> <div class="CourierNew">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
  <tr>
    <td>Georgia</td>
    <td><div class="Georgia">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
  <tr>
    <td>Impact</td>
    <td><div class="Impact">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
  <tr>
    <td>Times New Roman</td>
    <td><div class="TimesNewRoman">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
  <tr>
    <td>Trebuchet MS</td>
    <td><div class="TrebuchetMS">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
  <tr>
    <td>Verdana</td>
    <td><div class="Verdana">HyperText Markup Language (HTML) is the main markup language.</div></td>
  </tr>
</table>
</body>
</html>

表示結果

上記のHTMLファイルを表示すると下図の結果となります。


登録日 :2012-12-21    最終更新日 :2013-01-10
このページのタグ:[CSS] [HTML]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)