文字の種類を指定する（フォント）
文字の種類（フォント）を指定する方法です。
明朝体,ゴシック体
フォントを複数指定したい場合には、各フォントを『,』（カンマ）で区切って設定する事で可能になります。
表示されるのは、指定した順番になります。
また、フォント名の中にスペース（空白）を含む場合には『"』または『'』で囲む事になっておりますが、スタイルシートの要素の中で指定する際には、フォント名を『"』で囲むとstyle="font-family:"フォント名""この様に『"』がダブってしまい、機能しない場合がありますので、『'』で囲む方が良いと思います。
フォントは指定しても、表示するパソコンにそのフォントが入っていない場合には、そのブラウザの規定値で表示されます。
Windows と Macintosh と、cssでは下記の様になってます。
【注意】
フォントの指定の場合には、特に下記cssのキーワードで指定する場合等は、ブラウザ自体の設定によって変更されている場合に、ブラウザの設定が優先されていく場合があります。
|
cssのキーワード (  )
|
serif, sans-serif, cursive, fantasy, monospace |
|
英数字 （  / 共通）
|
arial, verdana, century, times,'times new roman' |
|
日本語 （ のみ）
|
"ＭＳ ゴシック", "ＭＳ Ｐゴシック", "ＭＳ 明朝", "ＭＳ Ｐ明朝" |
|
日本語 （ のみ）
|
"osaka", "osaka−等幅", "細明朝体", "平成角ゴシック" |
| フォント名 | 表示例:英数 | 表示例:漢字 |
|---|---|---|
| serif |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| sans-serif |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| cursive |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| fantasy |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| monospace |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| arial |
0123456789 abcdefghijkl abcdefghijkl |
英数字のフォントなので変化ありません。 ↓ ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| verdana |
0123456789 abcdefghijkl abcdefghijkl |
|
| century |
0123456789 abcdefghijkl abcdefghijkl |
|
| times |
0123456789 abcdefghijkl abcdefghijkl |
|
| 'times new roman' |
0123456789 abcdefghijkl abcdefghijkl |
|
| 'ＭＳ ゴシック' |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| 'ＭＳ Ｐゴシック' |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| 'ＭＳ 明朝' |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| 'ＭＳ Ｐ明朝' |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| osaka |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| 'osaka−等幅' |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| '細明朝体' |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
| '平成角ゴシック' |
0123456789 abcdefghijkl abcdefghijkl |
ホームページ作成のフォント あいうえおアイウエオｱｲｳｴｵ ０１２３４５６７８９ |
フォントの種類を指定して表現したい場合には、<font face=種類>〜</font>を使用してフォントを指定します。
フォント名を指定するには、フォント名を指定する場合と、フォントを分類するキーワードで指定する場合があります。
等幅系は、文字同士の間隔（同幅フォントにて）を参照願います。
<font face='ＭＳ Ｐ明朝'>明朝体</font>,
<font face='ＭＳ ゴシック'>ゴシック体</font>
ホームページ作成ＴＯＰ > 文章や文字 > 文字の種類を指定する（フォント） > このページのＴＯＰ ▲
使用するフォントを指定するスタイルは、font-family:種類に設定する事で実現できます。
フォント名を指定するには、フォント名を指定する場合と、フォントを分類するキーワードで指定する場合があります。
フォント名に間違いがあると表示がおかしくなったりする原因になりますので、分類の指定が良いと思います。
【注意】
フォントの指定の場合には、特に下記cssのキーワードで指定する場合等は、ブラウザ自体の設定によって変更されている場合に、ブラウザの設定が優先されていく場合があります。
| キーワード | 系統 |
|---|---|
| cursive | 筆記体系 |
| serif | 明朝体系 |
| sans-serif | ゴシック体系 |
| monospace | 等幅系 |
等幅系は、文字同士の間隔（同幅フォントにて）を参照願います。
<span style="font-family:'ＭＳ Ｐ明朝'">明朝体</span>,
<span style="font-family:'ＭＳ ゴシック'">ゴシック体</span>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
.sample1 {font-family:'ＭＳ Ｐ明朝';}
.sample2 {font-family:'ＭＳ ゴシック';}
-->
</style>
</head>
<body>
<p>
<span class="sample1">明朝体</span>,
<span class="sample2">ゴシック体</span>
</p>
</body>
</html>
ホームページ作成ＴＯＰ > 文章や文字 > 文字の種類を指定する（フォント） > このページのＴＯＰ ▲
