マイナーだけど便利なCSSプロパティ

マイナーだけど便利なCSSプロパティ

今回はあまり有名ではありませんが、知っておくと便利なcssプロパティについて紹介をしていきたいともいます。

紹介するのが、font-displayです。

font-displayというプロパティは、Webフォントがブラウザ上で読み込まれる前にどのように処理するかや、読み込みが失敗してしまったときの動作を指定する CSSプロパティです。

ウェブフォントが読み込まれるまで、 なかなか画面が表示されないことがあります。
ページの読み込み速度が遅ければ、 ユーザーはページから離れてしまうため、ユーザビリティが低下してしまいます。

テキストが表示される時間は ブラウザにもよりますが、およそ2秒程度です。
2秒は短い時間かもしれませんが、Webを閲覧している ユーザーにとっては極めて長く感じてしまうものです。

このプロパティには、次の5つの値が用意されています。
auto、block、swap、fallback、optional

特に、swapでは、フォントが読み込まれる間に代替フォントが表示されるので、お勧めです。