JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストのフォントファミリーを設定するには？fontFamilyプロパティの使い方

JavaScriptでテキストのフォントファミリーを変更するには、スタイルオブジェクトのfontFamilyプロパティを使用します。CSSのfont-familyプロパティに相当し、ボタンのクリックなどのユーザー操作に応じて、ページ表示後にフォントを動的に切り替えることができます。

基本構文

element.style.fontFamily = "フォント名1, フォント名2, 総称ファミリー";

フォントはカンマ区切りで複数指定できます。先頭に指定したフォントが閲覧環境に存在しない場合は、順に次の候補へフォールバックされます。最後にsans-serifやserifなどの総称ファミリーを指定しておくと、どの環境でも意図した系統の書体で表示され、レイアウトの崩れを防げます。

サンプルコード

次の例では、「フォントファミリーを設定」ボタンをクリックすると、段落のフォントがVerdanaに変更されます。コードをHTMLファイルとして保存し、ブラウザで実際の動作を確認してみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>見出し1</h1>
<p id="myID">
これはデモ用テキストです。JavaScriptのfontFamilyプロパティを
変更すると、この段落の表示フォントが切り替わります。
</p>
<button type="button" onclick="display()">フォントファミリーを設定</button>
<script>
function display() {
document.getElementById("myID").style.fontFamily = "verdana, sans-serif";
}
</script>
</body>
</html>

押さえておきたいポイント

  • フォント名にスペースが含まれる場合（例：Times New Roman）は、引用符で囲むと確実に認識されます。
  • 日本語のサイトでは「Meiryo, Hiragino Kaku Gothic ProN, sans-serif」のように和文フォントを組み合わせて指定するのが一般的です。
  • スタイルを頻繁に切り替える場合は、CSS側でクラスを定義してclassNameを入れ替える方法も検討すると、コードがすっきりして管理しやすくなります。
  1. JavaScriptでテキストの行間を設定する方法

    テキストの行間（行と行の距離）を設定するには、lineHeightプロパティを使用します。このプロパティは、要素内の各行の高さを制御し、値を大きくするほど行間が広がります。JavaScriptから操作する場合は、document.getElementById()などで対象の要素を取得し、style.lineHeightに値を代入します。値には数値（フォントサイズに対する倍率）のほか、「px」や「%」などの単位も指定できます。以下のサンプルコードを実行して、JavaScriptでテキストの行間を設定する方法を確認してみましょう。サンプルコード<!DOCTYPE html> <h

  2. JavaScriptでテキストの文字間隔（レタースペーシング）を設定する方法

    文字間隔の設定には「letterSpacing」プロパティを使うJavaScriptでテキストの文字と文字の間隔を調整するには、styleオブジェクトのletterSpacingプロパティを使用します。このプロパティはCSSのletter-spacingに対応しており、「px」や「em」、「pt」などの長さの単位で文字間のスペースを自由に指定できます。値には正の数値を指定すれば文字間が広くなり、負の数値を指定すれば狭くなります。また、「normal」を設定すればデフォルトの間隔に戻すことも可能です。サンプルコード以下のコードでは、ボタンをクリックするとdisplay()関数が呼び出され、idが