CSS - font

トップ > CSSリファレンス > font

概要

属性名 font
<font> | <system-font>
値の詳細
<font> = [ <style> || <variant> || <weight> || <stretch> ]? <size> [ / <height> ]? <family>
<system-font> = caption | icon | menu | message-box | small-caption | status-bar
初期値個々の要素を参照
適用可能要素すべての要素
継承継承する
メディアvisual
アニメーション個々の要素を参照

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
基本CSS13113.51
<system-font>CSS2.141161
<stretch>CSS2.199???

説明

フォントのスタイル、変換、太さ、サイズ、表示高さ、ファミリをまとめて指定します。

説明
<style>フォントスタイルを指定します。font-styleを参照してください。
<variant>フォントの変換を指定します。font-variantを参照してください。normalsmall-caps のみが指定可能です。
<weight>フォントの太さを指定します。font-weightを参照してください。
<stretch>フォントの横幅を指定します。font-stretchを参照してください。
<size>フォントサイズを指定します。font-sizeを参照してください。
<height>フォントの高さを指定します。line-heightを参照してください。
<family>フォントファミリを指定します。font-familyを参照してください。
captionボタンやドロップダウンなどのキャプションコントロールで使用されているフォント
iconラベルアイコンに使用されているフォント
menuメニューで使用されているフォント
message-boxダイアログボックスで使用されているフォント
small-captionスモールコントロールで使用されているフォント
status-barステータスバーで使用されているフォント

システムフォント以外を指定する場合、最低限 <size><family> が必須となります。

CSS
.sample { font: 100% Arial; }

行の高さは、<size> の後に /<height> で指定します。

CSS
.sample { font: 100% / 1.5em Arial; }

<size> の前に、<style>, <variant>, <weight> を順不同で複数追加できます。

CSS
.sample1 { font: italic 100% Arial; }
.sample2 { font: italic small-caps 100% Arial; }
.sample3 { font: italic small-caps bold 100% Arial; }

message-box など、いくつかのシステムフォントを利用できます。

CSS
.sample { font: message-box; }

使用例

HTML
 <table>
  <tr><td style="width:150px;">通常</td><td>謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>130% Arial</td><td style="font: 130% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>100% fantasy</td><td style="font: 100% fantasy">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>100%/200% Arial</td><td style="font: 100%/200% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>italic 100% Arial</td><td style="font: italic 100% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>small-caps 100% Arial</td><td style="font: small-caps 100% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>bold 100% Arial</td><td style="font: bold 100% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>caption</td><td style="font: caption">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>icon</td><td style="font: icon">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>menu</td><td style="font: menu">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>message-box</td><td style="font: message-box">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>small-caption</td><td style="font: small-caption">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>status-bar</td><td style="font: status-bar">謹賀新年 / おめでとう / Happy New Year.</td></tr>
 </table>
表示
通常謹賀新年 / おめでとう / Happy New Year.
130% Arial謹賀新年 / おめでとう / Happy New Year.
100% fantasy謹賀新年 / おめでとう / Happy New Year.
100%/200% Arial謹賀新年 / おめでとう / Happy New Year.
italic 100% Arial謹賀新年 / おめでとう / Happy New Year.
small-caps 100% Arial謹賀新年 / おめでとう / Happy New Year.
bold 100% Arial謹賀新年 / おめでとう / Happy New Year.
caption謹賀新年 / おめでとう / Happy New Year.
icon謹賀新年 / おめでとう / Happy New Year.
menu謹賀新年 / おめでとう / Happy New Year.
message-box謹賀新年 / おめでとう / Happy New Year.
small-caption謹賀新年 / おめでとう / Happy New Year.
status-bar謹賀新年 / おめでとう / Happy New Year.

リンク


Copyright (C) 1997-2016 杜甫々
初版:1997年7月27日、最終更新:2016年1月3日
http://www.tohoho-web.com/css/prop/font.htm