スタイルシート(CSS)でフォントの種類を指定する

スタイルシートでフォントの種類を指定する表示例

文字(フォント)の種類は<font>タグでも指定できますが、スタイルシート(CSS)で指定することが推奨されています。

文字(フォント)の種類の指定方法

{ font-family: フォント名1, フォント名2 , "フォント 3"; }

スタイルシート(CSS)でフォントの種類を指定する複数のフォント候補を並べるときは表示させたい順にカンマで区切って指定します。並べた順が優先順位です。ユーザーの環境に指定したフォントがなければ、ブラウザのデフォルトのフォントで表示されます。

フォントファミリー名で指定
フォントを具体的なフォント名で指定します。フォント名にスペースが含まれる場合は、「” “」または「’ ‘」で囲む必要があります。
総称ファミリー名で指定
フォントの種類を表す総称ファミリー名で指定します。フォントファミリー名で指定したフォントがユーザーの環境にない場合の最終的な選択肢となるので、指定しておくことが推奨されています。
sans-serif ゴシック系のフォント
serif 明朝系のフォント
cursive 筆記体・草書体のフォント
fantasy 装飾的なフォント
monospace 等幅フォント

HTML/XHTML

<h1>スタイルシート(CSS)でフォントの種類を指定</h1>
<h2>MS ゴシック</h2>
<p class="font1">フォントの種類を指定する表示例 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>MS Pゴシック</h2>
<p class="font2">フォントの種類を指定する表示例 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>MS 明朝</h2>
<p class="font3">フォントの種類を指定する表示例 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>MS P明朝</h2>
<p class="font4">フォントの種類を指定する表示例 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>メイリオ</h2>
<p class="font5">フォントの種類を指定する表示例 ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Arial</h2>
<p class="font6">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Century</h2>
<p class="font7">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Century Gothic</h2>
<p class="font8">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Comic Sans MS</h2>
<p class="font9">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Courier</h2>
<p class="font10">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Courier New</h2>
<p class="font11">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Impact</h2>
<p class="font12">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Symbol</h2>
<p class="font13">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Times New Roman</h2>
<p class="font14">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Verdana</h2>
<p class="font15">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

CSS

<style type="text/css">
<!--
p { font-size: 200%; }
.font1 { font-family: "MS ゴシック"; }
.font2 { font-family: "MS Pゴシック"; }
.font3 { font-family: "MS 明朝"; }
.font4 { font-family: "MS P明朝"; }
.font5 { font-family: メイリオ; }
.font6 { font-family: Arial; }
.font7 { font-family: Century; }
.font8 { font-family: "Century Gothic"; }
.font9 { font-family: "Comic Sans MS"; }
.font10 { font-family: Courier; }
.font11 { font-family: "Courier New"; }
.font12 { font-family: Impact; }
.font13 { font-family: Symbol; }
.font14 { font-family: "Times New Roman"; }
.font15 { font-family: Verdana; }
-->
</style>

スタイルシートでフォントの種類を指定する表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録