style.fontは、要素のスタイル属性のfontプロパティの値を取得、もしくは、設定するプロパティ。
fontプロパティは、フォントに関する設定を一括指定することができる。
構文
取得
var $font = $elementReference.style.font;
戻り値
要素のスタイル属性のfontプロパティの値。
設定
詳細指定
$elementReference.style.font = "font-style font-variant font-weight font-size/line-height font-family";
-
font-style：フォントスタイル。
詳しくは、style.fontStyleプロパティのページへ。 - font-variant：スモールキャップフォント。
詳しくは、style.fontVariantプロパティのページへ。 - font-weight：フォントの太さ。
詳しくは、style.fontWeightプロパティのページへ。 - font-size：フォントサイズ（文字の大きさ）。
詳しくは、style.fontSizeプロパティのページへ。 - line-height：行間（行の高さ）。
詳しくは、style.lineHeightプロパティのページへ。 - font-family：フォント（書体）。
詳しくは、style.fontFamilyプロパティのページへ。
システムフォント
$elementReference.style.font = "caption | icon | menu | message-box | small-caption | status-bar";
- caption | icon | menu | message-box | small-caption | status-bar
- 下記の何れかの値で指定する。
- caption：キャプション用フォント。
- icon：アイコン用フォント。
- menu：メニュー用フォント。
- message-box：メッセージボックス（ダイアログボックス）用フォント。
- small-caption：小さいキャプション用フォント。
- status-bar：ステータスバー用フォント。
継承
$elementReference.style.font = "inherit";
親要素の設定を継承。
サンプル
サンプルのfontプロパティの値：
Sample Element / サンプル要素
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを「fontプロパティ」の値に設定する。設定値を「サンプルのfontプロパティの値：」の右横に表示する。「Sample Element / サンプル要素 」のテキストを指定したフォントスタイルで表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setFontStyle( $font ) {
var $element = document.getElementById( "sample" );
$element.style.font = $font;
var $font = $element.style.font;
document.getElementById( "sampleOutput" ).innerHTML = $font;
}
</script>
function setFontStyle( $font ) {
var $element = document.getElementById( "sample" );
$element.style.font = $font;
var $font = $element.style.font;
document.getElementById( "sampleOutput" ).innerHTML = $font;
}
</script>
HTML
<button onclick="setFontStyle('normal normal normal 30px/300% 'ＭＳ Ｐゴシック',sans-serif');">normal normal normal 30px/300% 'ＭＳ Ｐゴシック',sans-serif</button>
<br />
<button onclick="setFontStyle('italic small-caps bold 300%/200% Impact,sans-serif');">italic small-caps bold 300%/200% Impact,sans-serif</button>
<br />
<button onclick="setFontStyle('caption');">caption</button>
<button onclick="setFontStyle('icon');">icon</button>
<button onclick="setFontStyle('menu');">menu</button>
<button onclick="setFontStyle('message-box');">message-box</button>
<button onclick="setFontStyle('small-caption');">small-caption</button>
<button onclick="setFontStyle('status-bar');">status-bar</button>
<br />
<button onclick="setFontStyle('inherit');">inherit</button>
<br />
<p>サンプルのfontプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>
<br />
<button onclick="setFontStyle('italic small-caps bold 300%/200% Impact,sans-serif');">italic small-caps bold 300%/200% Impact,sans-serif</button>
<br />
<button onclick="setFontStyle('caption');">caption</button>
<button onclick="setFontStyle('icon');">icon</button>
<button onclick="setFontStyle('menu');">menu</button>
<button onclick="setFontStyle('message-box');">message-box</button>
<button onclick="setFontStyle('small-caption');">small-caption</button>
<button onclick="setFontStyle('status-bar');">status-bar</button>
<br />
<button onclick="setFontStyle('inherit');">inherit</button>
<br />
<p>サンプルのfontプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>