TOP ＞ スタイルシートで文字をデザイン ＞ 文字フォントを指定する。
文字フォントを指定する。
ユーザーのPCにインストールされているフォントに依存してしまう、という欠点はありますが、 文字フォントをスタイルシートで指定することも出来ます。font-familyプロパティを使います。
font-familyプロパティで指定する場合、特定のフォント名を指定する方法とフォントのグループ名を指定する方法があります。
特定のフォント名を指定する場合
この場合、気をつけなければならないのは、フォント名の大文字/小文字や半角/全角、スペースまで正確に記述しなければいけません。 フォント名にスペースが入る場合には「"」でフォント名を囲む必要があります。（例としては、「MS ゴシック」を指定する場合、 MSとゴシックの間に半角スペースが入るので、"MS ゴシック"と記述します）
特定のフォントを指定して、ユーザーのPCにそのフォントがない場合は指定したフォントに近いフォントが自動で選ばれます。
フォントのグループ名を指定する
フォントのグループ名を指定する方法があります。この場合は、ユーザーのパソコンによって、適切なフォントが自動的に選ばれます。
| グループ名 | フォントの種類 |
| serif | セリフ（かざり）のついたフォント。明朝系・TimeNewRoman |
| sans-serif | セリフ（かざり）のないフォント。ゴシック系・Arial |
| cursive | 筆記体・草書体 |
| fantasy | 装飾系のフォント |
| monospace | 等幅のフォント |
font-familyプロパティは複数の値を指定することが出来ます。そこで、特定のフォント名をいくつか指定して、 その後ろにグループ名を指定しておけば、特定のフォント名があればそれが表示され、なければグループからフォントが選ばれます。
文字フォントを指定する。
【書き方】
font-style : フォント名[グループ名],フォント名[グループ名],… ;
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>文字フォントを指定するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .s1{ font-family: "ＭＳ Ｐ明朝", serif; color: #aa0000;} .s2{ font-family: "ＭＳ Ｐゴシック", sans-serif; color: #00aa00;} .s3{ font-family: monospace; color: #0000aa;} .s4{ font-family: cursive; background-color:#ff00ff;} .s5{ font-family: fantasy; background-color:#8888ff;} --> </style> </head> <body bgcolor="silver"> <p><span class="s1">MS P明朝か、なければかざりつきのフォントをしております</span></p> <p><span class="s2">MS Pゴシックか、なければかざりなしのフォントをしております</span></p> <p><span class="s3">等幅フォントを指定しております</span></p> <p><span class="s4">筆記体か草書体のフォントを指定しております</span></p> <p><span class="s5">装飾系フォントを指定しております</span></p> </body> </html> |
[
スタイルシートで文字をデザイン ]
