CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita

テクノロジーカテゴリーの変更を依頼記事元:

qiita.com/oreo

95 usersがブックマークコメント

記事へのコメント7件

注目コメント
新着コメント

sakamotz “{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/","name":"Qiita"}},{"@type":"ListItem","position":2,"item":{"@id":"/tags/%23%3CQiita::Graph::Result:0x00564e9ac35048%3E","name":"HTML"}}]}HTMLCSSHTML5CSS3webfont153”

2019/05/13 リンク

localnavi ]

2019/01/20 リンク

idr_zz font-display: swapいいね。自分は画面チラついてでも文字が読めた方がいいと考える方。 CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita

2018/08/29 リンク

sh19910711 font-display

2017/08/17 リンク

wordi 異なる字間の考慮は必要なんだろうか

2017/08/16 リンク

tofu-kun なるほど

2017/08/16 リンク

yamadar Webフォントを使用する時は、“font-display: swap;”も併用するとWebフォントが読み込まれるまでに一時的に他のフォントを表示できる

2017/08/16 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita

💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み... 💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの