6
Webフォントまたはローカルに読み込まれたフォント?
Cufonを使用してトラブルが発生して以来、外部のフォントリソースを使用することはしませんでしたが、最近では、フォントをロードする別の方法を探して、より良い方法があるかどうかを確認しています。優れたメソッドには、突然に現れる方法があります。 多くの新しいメソッドがあり、メソッドごとにバリエーションがあるようです。タイプキットを使用する必要がありますか?またはgoogle webfonts(jsまたはcssを使用)?ローカルでロードするフォント(fontsquirrel.comで生成されたメソッドなど)を引き続き使用する必要がありますか? いくつかのテストを行い、最もよく受け入れられていると思われるメソッドを以下にリストしますが、Webフォントに移行する価値はありますか?リソースの負荷(http要求)が多く、ファイル形式の種類が少ない(互換性が低い)などのようですが、ほとんどの場合、ファイルは非同期で効率的に読み込まれるように見えます。 それは単に状況と必要性の問題ですか?もしそうなら、それらは何ですか? これらの方法には大きな違いがありますか? 私がリストしていないより良い方法はありますか? パフォーマンスのプロ/コンは何ですか?見て?依存関係?互換性? 私はここでベストプラクティスを本当に探しています。パフォーマンスは重要ですが、スケーラビリティと使いやすさも重要です。言うまでもなく、ルックアンドフィール。 Google CSS 外部スタイルシートのみを使用 互換性のある最小のファイルタイプのみを使用 は、styleshee()のコンテンツを使用@importまたは<link>取得@font-faceして、独自のスタイルシートに直接配置できます。 試験結果 78ms load of html 36ms load of css Google JSメソッド webfont.jsスタイルセットの読み込みに使用します 互換性のある最小のファイルタイプのみを使用 :rootクラスに要素を追加します 頭にスクリプトを追加します。 試験結果 171ms load of html 176ms load of js 32ms load of css Typekitメソッド :root要素をクラスに追加します。 *.jsスニペットまたは外部から読み込まれたファイル*.jsfileを使用できます data:font/opentypeフォントファイルの代わりに使用します。 頭にスクリプトを追加 埋め込みcssをヘッドに追加します 外部スタイルシートをヘッドに追加します typekit.comからフォントとターゲットセレクタを簡単に追加/削除/調整できます …