HTMLだけでフォントを指定する方法とJavaScript更新時の注意点

HTMLで文字のフォントを指定する場合、CSSを使わずに行いたいことがあります。特にJavaScriptで自動更新を行う場合、表示が元に戻ってしまう問題があります。本記事では、純粋にHTMLだけでフォントを指定する方法と更新時の対策を解説します。

タグを使った基本的なフォント指定

HTML4以前では、を使ってフォントを指定できます。例えば次のように記述します。

これはArialフォントです

複数のフォントを指定したい場合は、カンマ区切りでフォント名を並べることも可能です。

優先順にフォントが選択されます

JavaScriptで要素を更新する場合、innerHTMLで書き換えるとデフォルトスタイルに戻ってしまうことがあります。これを防ぐには、更新後の文字列にもタグを含めるようにします。

例。

document.getElementById(‘target’).innerHTML = ‘更新後のテキスト’;

タグはHTML5では非推奨です。最新ブラウザでもサポートはありますが、将来的にはCSSに置き換えることが推奨されます。CSSを使わない場合は、古いHTML仕様に従ってタグを使用する形になります。

また、ユーザー環境にフォントがインストールされていない場合は、代替フォントが表示されますので、複数指定しておくと安全です。

純粋なHTMLでフォントを指定するには、を使用します。JavaScriptで自動更新する場合は、更新内容にも同じタグを含めることでフォントを維持できます。

ただし、HTML5では非推奨であるため、将来的にはCSSでの指定に移行することを念頭に置きつつ、現在はこの方法で簡単にフォント指定が可能です。