style.fontFamilyは、要素のスタイル属性のfont-familyプロパティの値を取得、もしくは、設定するプロパティ。
font-familyプロパティは、フォント(書体)を指定することができる。
構文
取得
var $fontFamily = $elementReference.style.fontFamily;
戻り値
要素のスタイル属性のfont-familyプロパティの値。
設定
$elementReference.style.fontFamily = "values";
- values
- 下記の何れかの値を指定する。
-
family-name:フォント名。
例:
MS ゴシック
、MS 明朝
-
generic-family:フォントの総称。
例:
serif
、sans-serif
、cursive
、fantasy
、monospace
- inherit:親要素の設定を継承。
-
family-name:フォント名。
例:
複数のフォント候補を指定
$elementReference.style.fontFamily = "フォント名1, フォント名2, フォントの総称";
「フォント名1」がなければ「フォント名2」、「フォント名2」がなければ「フォントの総称」に指定したフォントを適用する。
複数設定例
「MS 明朝」がなければ「MS ゴシック」、「MS ゴシック」がなければ「sans-serif」を適用する。
$elementReference.style.fontFamily = "'MS 明朝','MS ゴシック',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(''MS ゴシック',sans-serif');">'MS ゴシック',sans-serif</button>
<button onclick="setColor(''MS 明朝',sans-serif');">'MS 明朝',sans-serif</button>
<button onclick="setColor(''MS 明朝','MS ゴシック',sans-serif');">'MS 明朝','MS ゴシック',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(''MS ゴシック',sans-serif');">'MS ゴシック',sans-serif</button>
<button onclick="setColor(''MS 明朝',sans-serif');">'MS 明朝',sans-serif</button>
<button onclick="setColor(''MS 明朝','MS ゴシック',sans-serif');">'MS 明朝','MS ゴシック',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>