199/210

ionicでフォントファミリーを使用する

この連載は、初心者がionicと言うツール(みたいなもの)を知って四苦八苦しながらゲームブックを作ったり遊んだりするWebアプリを作っていく記録です。

さて、今回はページによってフォントを変えてみるための技術的備忘録です。

ここ最近は、CSS変数と言うものに多少慣れてきたのですが、ionicには定義済みのCSS変数も多々用意されています。

フォントファミリー用のCSS変数も用意されていて、使い方も非常に簡単です。

逆にそれ以外の方法を使うと、エラーが出るかもしれません(というか、そこで躓きました）

使用例を以下に記します。

const el = document.getElementById('container') as HTMLElement;

el.style.setProperty('--ion-font-family', 'serif');

上のコードは、'container'と言うidを持つ要素(および、その中の要素)に対して使用フォントファミリーを'serif'にすると言うものです。(つまりページによって、それまでゴシック体だったのを明朝体に変更したり出来ます）

このコードを走らせると、'container'と言うidを持つ要素(および、その中の要素)で使うフォントは明朝体になります。

今回は総称ファミリー名での指定ですが、細かな指定は試していませんが悪しからずです。