FontAwesomeや自分でホストしているウェブフォントを読み込む - Web Font Loaderノート
Web Font LoaderではGoogle FontsやTypekit、Fonts.comなど組み込みのモジュールで簡単にウェブフォントをロードすることが出来ますが、それら組み込みモジュール以外にも自サイトでホストしているウェブフォントや、第三者がパブリックに公開・ホストしているウェブフォントを自由にロードすることが出来ます。 FontAwesomeとNoto Sans Japaneseを読み込むデモ 組み込みモジュール以外のウェブフォントを読み込むには設定オブジェクトのcustomプロパティにフォント名、FVD、@font-faceが記述されているcssのurlをセットします。次のデモでは、このカスタムモジュールを利用して人気のアイコンフォントであるFontAwesomeとGoogleが提供しているアーリーアクセスウェブフォントのNoto Sans Japaneseを読み込んでいます
FOUT（フォント切り替えのちらつき）を防ぐ
ウェブフォントはフォントファイルがダウンロードされて初めて利用可能になります。IEなど一部のブラウザはウェブフォントをダウンロードしている間、コンピュータにインストールしてある別のフォントを使って”とりあえず”テキストを表示します。そしてフォントのダウンロードが完了すると、ウェブフォントでテキストを再表示します。この様な動作はビジターがすぐにテキストを読み始められる反面、フォントが急に入れ替わって違和感やチラつきを感じさせる要因にもなります。こうした一瞬スタイルが適用されていないテキストが表示されることをFOUT(Flash of Unstyled Text)と言います。 このビデオはGoogle Fontsからウェブフォントを読み込んでFOUTが発生している様子のブラウザ画面をキャプチャしたものです。WEBPAGETESTを使い、ブラウザはIE11です。HTMLはこちら。 ウェブページの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
