style.fontFamilyは、要素のスタイル属性のfont-familyプロパティの値を取得、もしくは、設定するプロパティ。
font-familyプロパティは、フォント（書体）を指定することができる。
構文
取得
var $fontFamily = $elementReference.style.fontFamily;
戻り値
要素のスタイル属性のfont-familyプロパティの値。
設定
$elementReference.style.fontFamily = "values";
- values
- 下記の何れかの値を指定する。
-
family-name：フォント名。
例：
ＭＳ ゴシック、ＭＳ 明朝 -
generic-family：フォントの総称。
例：
serif、sans-serif、cursive、fantasy、monospace - inherit：親要素の設定を継承。
-
family-name：フォント名。
例：
複数のフォント候補を指定
$elementReference.style.fontFamily = "フォント名１, フォント名２, フォントの総称";
「フォント名１」がなければ「フォント名２」、「フォント名２」がなければ「フォントの総称」に指定したフォントを適用する。
複数設定例
「ＭＳ 明朝」がなければ「ＭＳ ゴシック」、「ＭＳ ゴシック」がなければ「sans-serif」を適用する。
$elementReference.style.fontFamily = "'ＭＳ 明朝','ＭＳ ゴシック',sans-serif";
サンプル
サンプルのfont-familyプロパティの値：
Sample Element / サンプル要素
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを「font-familyプロパティ」の値に設定する。設定値を「サンプルのfont-familyプロパティの値：」の右横に表示する。設定値のフォントがパソコン内にあれば、「Sample Element / サンプル要素 」のテキストを指定したフォントで表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setColor( $fontFamily ) {
var $element = document.getElementById( "sample" );
$element.style.fontFamily = $fontFamily;
var $fontFamily = $element.style.fontFamily;
document.getElementById( "sampleOutput" ).innerHTML = $fontFamily;
}
</script>
function setColor( $fontFamily ) {
var $element = document.getElementById( "sample" );
$element.style.fontFamily = $fontFamily;
var $fontFamily = $element.style.fontFamily;
document.getElementById( "sampleOutput" ).innerHTML = $fontFamily;
}
</script>
HTML
<button onclick="setColor('serif');">serif</button>
<button onclick="setColor('sans-serif');">sans-serif</button>
<button onclick="setColor('monospace');">monospace</button>
<button onclick="setColor('Impact,sans-serif');">Impact,sans-serif</button>
<br />
<button onclick="setColor(''ＭＳ ゴシック',sans-serif');">'ＭＳ ゴシック',sans-serif</button>
<button onclick="setColor(''ＭＳ 明朝',sans-serif');">'ＭＳ 明朝',sans-serif</button>
<button onclick="setColor(''ＭＳ 明朝','ＭＳ ゴシック',sans-serif');">'ＭＳ 明朝','ＭＳ ゴシック',sans-serif</button>
<br />
<button onclick="setColor('inherit');">inherit</button>
<br />
<p>サンプルのfont-familyプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>
<button onclick="setColor('sans-serif');">sans-serif</button>
<button onclick="setColor('monospace');">monospace</button>
<button onclick="setColor('Impact,sans-serif');">Impact,sans-serif</button>
<br />
<button onclick="setColor(''ＭＳ ゴシック',sans-serif');">'ＭＳ ゴシック',sans-serif</button>
<button onclick="setColor(''ＭＳ 明朝',sans-serif');">'ＭＳ 明朝',sans-serif</button>
<button onclick="setColor(''ＭＳ 明朝','ＭＳ ゴシック',sans-serif');">'ＭＳ 明朝','ＭＳ ゴシック',sans-serif</button>
<br />
<button onclick="setColor('inherit');">inherit</button>
<br />
<p>サンプルのfont-familyプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>