2016年11月8日(火)
Webフォントの使用時にゼッタイ知っておきたいこと。読み込み時に起こるFOIC／FOUC対策とは？
ちょっと極端かもしれませんが、例えば2G回線の国際ローミングデータプラン付き携帯電話をもって海外を旅行したとします。
2G回線の携帯電話だとWebページをロードするのに10秒かかります。さらにコンテンツの他に見えない下線や、見た目が少し違うだけのsans-serifフォントのダウンロードにもう4秒もかかるとなると、ユーザー心理としてちょっと耐えられません。そのままブラウザを閉じてしまうかもしれませんよね……
でもこれってWebサイトがきちんと設定していれば回避できる問題なんです。だってJavaScriptをたった4行書けば済む話なんですから。
なぜWebフォントのロードタイミングに気をつけなければならないのか？
まずWebフォントをロードタイミングには、考慮しなければならない問題が2点あります。
FOIC (Flash Of Invisible Content)問題： 使いたいフォントをブラウザが持っていない場合、ブラウザは見えないインクでテキストを描画し、そのフォントがダウンロードされるまで待って、テキストの再描画と再レイアウトを行います。こちらのGIFファイルをご覧ください。
<...
0
1
0
3author:
SeleQt（セレキュト）
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。
‹ PREV
Web制作に役立つツールやリソースを厳選してまとめている・「StockJo」
NEXT ›
「ありがとう～」「すごいですねぇ！」のあなどれないチカラ。上司・同僚・取引先に、もうひと言添えてみよう！
Ads
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。SeleQt（セレキュト）の記事『Webフォントの使用時にゼッタイ知っておきたいこと。読み込み時に起こるFOIC／FOUC対策とは？』についてまとめています。
この記事は特にjavascript・フォント・ダウンロード・Chromeについて書かれており、 素材DLのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のSeleQt（セレキュト）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとSeleQt（セレキュト）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
