CSSに一行追加してWEBフォントを使用した際の画面のちらつきをおさえる。

マークアップ

くりちゃんです。

今回はWEBフォントを使用する際の画面のちらつき、一瞬表示されない現象を回避するための便利なプロパティを紹介したいと思います。

画面のちらつきがおこる原因

通常はWEBフォントを読み終えるまではテキストを表示させない機能がブラウザには組み込まれています。 このため読み込み中はテキストが表示されなくなってしまい、完全に読み込みを終えた後にテキストが表示される仕組みになっています。

だから画面のちらつき、一瞬表示されない現象が起こってしまうんですね。

font-display:swapを追加する

この現象を回避する手段の一つとして、font-displayというプロパティがあります。

font-display:swap

このプロパティを用いることで、WEBフォントの読み込み中はローカルにあるフォントを代わりに表示させます。読み込みが終わるとWEBフォントが表示されます。

@font-face {
    font-family: fontname;
    font-style: normal;
    font-weight: normal;
    src: url('fontname.woff') format('woff');
    font-display:swap;
}

cssには@font-faceに追加するような形で書きましょう。

body {
    font-family: fontname, sans-serif;
}

これでWEBフォントが読み込まれるまではsans-serifが表示されます。

対応ブラウザについては詳しく調べられていませんが、Chromeでは問題なく動作しています。cssに一行追加するだけで使いやすさが大きく変わるので、何もしないよりは追加した方が良いでしょう。

まとめ

今回はWEBフォントのちらつき、一瞬表示されない現象を回避する方法を紹介しました。cssに一行追加するだけなので簡単に使えるとても便利なプロパティだと思います。

最後に、WEBフォントのちらつきに関してはこの方法で回避することは可能ですが、そもそも本当にWEBフォントを使用するべきなのかを考えましょう。WEBフォントは重くなりがちですからね。表示速度・デザインの視点から実装するべきなのかを判断しましょう。

そして、もし実装する場合はファイルサイズを軽減することを意識して実装しましょう。

コメント

タイトルとURLをコピーしました