TOP ＞ スタイルシートで文字をデザイン ＞ システムフォントを使用する。
システムフォントを使用する。
Webページのフォントを、OSのシステムフォントで表示することも可能です。ただし、 実際にはWebブラウザによって表示されるフォントは統一されていません。
fontプロパティでシステムフォント名を指定することで、システムフォントで表示が可能です。 どんなケースで使用するかは疑問ですが・・・
システムフォント名と対応するフォント
| フォント名 | 対応するフォント |
| caption | ボタンなどのキャプション |
| icon | アイコンのラベル |
| menu | メニュー |
| message-box | メッセージボックス |
| small-caption | 小さなコントロールのキャプション |
| status-bar | ステータスバー |
システムフォントを使用する。
【書き方】
font : システムフォント名;
- サンプルページのコードは以下の通りです。
|
<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: caption; background-color: #ff9999; color: #0033ff;} .s2{ font: icon; background-color: #9999ff; color: #ff3300;} .s3{ font: menu; background-color: #ffff99; color: #3333ff;} .s4{ font: message-box; background-color: #99ffff; color: #ff3333;} .s5{ font: small-caption; background-color: #99ff99; color: #3333ff;} .s6{ font: status-bar; background-color: #ffffff; color: #000000;} --> </style> </head> <body bgcolor="silver"> <p>システムフォントを使用してみましょう。</p> <p><span class="s1">システムフォントcaptionを使用しています。</span></p> <p><span class="s2">システムフォントiconを使用しています。</span></p> <p><span class="s3">システムフォントmenuを使用しています。</span></p> <p><span class="s4">システムフォントmessage-boxを使用しています。</span></p> <p><span class="s5">システムフォントsmall-captionを使用しています。</span></p> <p><span class="s6">システムフォントstatus-barを使用しています。</span></p> <p>どれも一緒に見えますね。</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
