2020-02-12)TweetPocket見出しなどFONTを凝りたい箇所を画像書き出しして配置していたのも昔の話し、今はデバイスフォントでも綺麗だし、WEBフォントでさらにFONTを選べるようになりました。FONTの使用を避けることも何度かありました。漠然とではなく、実際に検証してみます。FONTだと表示スピードは早くなるのか?デモページを作成デモページのテキストは宮沢賢治の「オッペルと象」です。文字数はざっと5700文字。岩手で育つと何かっちゃあ宮沢賢治を読まされるんです。FONT使用時のjs以外の記述は無くし、font-sizeやmarginなどはstyleタグ、あるいはインラインで指定しています。デバイスフォントまずは、ただのデバイスフォントです。これはこれで慣れて親しんだFONTなので見やすいですね。FONTの代表格、Googleさんです。FONTを見出しやMVなどポイントで使う使い方が一般的かと思います。今回はさわらび明朝を使用してみました。明朝体とはいえ文字の太さを確保して視認性を高めています。活版っぽいのも味がありますね。(このデモページはIE対応済です。IE対応の仕方はこちらのページをご参照ください。Fontsで選択できます。漢字が四角いけど、アルファベットや仮名は柔らかい雰囲気です。(このデモページはIE対応済です。IE対応の仕方はこちらのページをご参照ください。CCを契約してるなら追加料金無しで使えます。Stdを使用してみました。他のFONTより体が大きい分、字間は詰まって見えます。レンタルサーバーはさくらインターネットさくらのレンタルサーバでモリサワのWebフォント30書体が無料でお使いいただけます。WordPressのプラグインとしても、HTMLへタグを記述する形でもご利用いただけます。Serverも同様のサービスがあります)。リュウミンや新ゴなどDTPで馴染みのFONTが揃っています。ナウ-GMを使用してみました。文字がはっきりとしてるし丁度良い丸みでなかなか見やすいですね。モリサワフォントのデモページ測定Chromeの機能拡張Lighthouseで表示スピードを測定していきます。Interactiveという項目を見ます。ページにアクセスしてから、ページを完全に読み込み、表示し終わるまでの時間のことです。FONTが、ひとまずページを読み込んで表示させてからFONTを反映させています。FONTとモリサワはFONTが反映されるのとページが表示されるのがほぼ同時です(その分、ページ読み込み時の真っ白な状態がちょっとある)。FONTはダイナミックサブセットというページ内で使用している文字を全部一文字ずつダウンロードしています。今回のデモページのように使用文字の種類が多いと重くなってしまいますが、見出しだけとかワンポイントで使うといいかもしれません。日本語FONTは早期アクセス時はちょっと遅かったのですが、正式版になるにあたりFONTのデータを細分化し、分割ストリーミングの形で素早くダウンロードできるよう改善がされています。FONTに指定していたのをH1〜H5のみの指定に変更、本文はデバイスフォントのデモページを作成し、こちらで再度表示速度を測定してみます。日本語FONTだけ遅くなりました。測定結果に若干揺らぎがある可能性もありますが、基本的に表示スピードが早くなるようです。