フォントフェイスオブザーバーと非同期でGoogleフォントを読み込む方法

this articleのウェブフォントを扱う最良の方法を読んだら、最近のjavacriptライブラリFont Face Observerを使用して、自分のウェブサイトでGoogleフォントを非同期に読み込む必要がありました。フォントフェイスオブザーバーと非同期でGoogleフォントを読み込む方法

documentationは、「フォントはGoogleフォントなどのフォントサービスによって提供できます」と読みますが、実際に実装する方法の例は示されていません。私はofficial websiteに掲載されているFont Face Observerに関する推奨記事を読んだことがありますが、それらはすべて自己ホストフォントでどのように使用するかを示しました。

誰かがGoogleフォントを読み込むためにフォントフェイスオブザーバを使用しましたか？または、これにアプローチする方法を示すドキュメントを教えてください。

出典

2016-06-20 Willege

なぜ私は自分自身をローダー*と呼ぶのか分からない。ブラウザはフォントを読み込みます。私が見ることができる限り、ロードされたときにはそのすべてがあなたに伝えられます。 –

@ T.J.Crowderこれには '.load（）'メソッドがあります。また、FOITを避けるために、フォントがロードされたときにあなたの身体のテキストをクラスに変更するよう指示します。あなたの意見では、Google/Typekitウェブフォントローダーは、フォントを読み込むための最も非同期的な方法のままですか？ – Willege

はい、フロントページの例で使用している 'load'メソッドを見ましたが、フロントページのCSSは*とにかく*フォントをロードするので、' load'が何を意味するのか分かりません。最善の方法を再：私はそのことについて意見を述べる資格はありません。しかし...フォントはデフォルトで非同期で読み込まれます*。私はまだプロセスを制御する必要性を感じていません。明らかに人々はそうしているので、ユースケースが必要です。 –

これは私がそれを使用したかなり簡単な方法ですが、それが最良の方法であるかどうかはわかりません。そのようなアプローチが良い理由は、JSファイルの最後にスクリプトがあるので、フォント読み込みがレンダリングをブロックしないからです。だから、基本的にJSファイルの解析が始まるとすぐにフォントのロードを開始し、読み込まれるとすぐにレンダリングされます。

import FontFaceObserver from 'fontfaceobserver' 
import loadCSS from './util/loadCSS' 

loadCSS('//fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700') 
const opensans = new FontFaceObserver('Open Sans') 
opensans.load().then(() => document.body.classList.add('fonts--loaded'))

出典

2016-09-27 05:39:56 thesublimeobject

フォントフェイスオブザーバーと非同期でGoogleフォントを読み込む方法

答えて

関連する問題