スタイルシートで文字のフォントを変更するコードを紹介します。
フォントを変更する場合はfont-familyプロパティを設定します。
フォントファミリーのキーワードで指定する場合
フォントファミリーを示すキーワードでフォントファミリーを指定できます。キーワードは以下があります。
フォントファミリーを示すキーワード
| キーワード | 説明 |
|---|
| sans-serif | ゴシックスタイルのフォントファミリーです |
| serif | ひげのついた書体や明朝スタイルのフォントファミリーです |
| cursive | 筆記体や草書体などの手書きスタイルのフォントファミリーです |
| fantasy | 草食系のフォントファミリーです |
| monospace | 等幅フォントファミリーです |
コード
.Serif {
font-family:serif;
}
.SansSerif {
font-family:sans-serif;
}
.Monospace {
font-family:monospace;
}
.Fantasy {
font-family:fantasy;
}
.Cursive {
font-family:cursive;
}
<!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ファイルを表示すると下図の結果となります。
フォントの書体が変更されていることが確認できます。
フォント名を指定する場合
フォント名を指定する場合はフォント名を「"」または「'」で囲んで指定します。
コード例
.FontMSMin {
font-family:"ＭＳ 明朝";
}
.FontMSGot {
font-family:"ＭＳ ゴシック";
}
.FontMeiryo {
font-family:"メイリオ";
}
.FontMSPMin {
font-family:"ＭＳ Ｐ明朝";
}
.FontMSPGot {
font-family:"ＭＳ Ｐゴシック";
}
.FontMSGotUI {
font-family:"MS UI Gothic";
}
.FontMeiryoUI {
font-family:"Meiryo UI";
}
<!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
コード例
下記コードを記述します。
.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;
}
<!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ファイルを表示すると下図の結果となります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2020-07-05
作成日: 2012-12-21
