ページが読み込まれる前に、@ font-faceフォントをプリロードするか、キャッシュすることは可能ですか？ページが読み込まれる前に、ページが最終的に読み込まれるときに醜いジャンプが発生しないようにすることはできますか？
dougoftheabaci
質問する
146571 次
14 に答える
70
2017年以降、プリロードがあります
MDN：要素のrel属性のプリロード値を使用すると、HTMLに宣言型フェッチ要求を記述して、ページのロード後すぐに必要となるリソースを指定できます。したがって、ページロードのライフサイクルの早い段階でプリロードを開始する必要があります。ブラウザの主要なレンダリング機構が作動します。これにより、ブラウザが早期に利用可能になり、ページの最初のレンダリングがブロックされる可能性が低くなり、パフォーマンスが向上します。
<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
ブラウザの互換性を常に確認してください。
フォントのプリロードに最も役立ちます（ブラウザがCSSでフォントを見つけるのを待たないでください）。一部のロゴ、アイコン、スクリプトをプリロードすることもできます。
- 他のテクニックの賛否両論はここで議論されています（私のブログではありません）。
- プリロードとプリフェッチに関するプリフェッチ（類似）およびSOの質問も参照してください。
于 2017-10-19T12:55:59.423 に答える
51
簡単なテクニックは、これをインデックスのどこかに置くことです。
<div class="font_preload" style="opacity: 0">
<span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
<span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
...
</div>
Chrome 34、Safari 7、FF 29、IE11でテスト済み
于 2014-05-16T14:48:40.957 に答える
24
ここに「プリロード」するためのいくつかのテクニックがあります：http： //paulirish.com/2009/fighting-the-font-face-fout/
ほとんどの場合、ブラウザをだましてファイルをできるだけ速くダウンロードさせます。
データURIとして配信することもできます。これは非常に役立ちます。また、ページコンテンツを非表示にして、準備ができたら表示することもできます。
于 2010-04-24T18:19:09.257 に答える
19
次のように、頭にプリロードrelを含める必要があります。
<head>
...
<link rel="preload" as="font" href="/somefolder/font-one.woff2">
<link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>
このようにして、woff2はプリロードをサポートするブラウザーによってプリロードされ、すべてのフォールバック形式は通常どおりにロードされます。
そしてあなたのcssフォントの顔はこれに似ているはずです
@font-face {
font-family: FontOne;
src: url(../somefolder/font-one.eot);
src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
url(../somefolder/font-one.woff) format('woff'),
url(../somefolder/font-one.ttf) format('truetype'),
url(../somefolder/font-one.svg#svgFontName) format('svg');
}
@font-face {
font-family: FontTwo;
src: url(../somefolder/font-two.eot);
src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
url(../somefolder/font-two.woff) format('woff'),
url(../somefolder/font-two.ttf) format('truetype'),
url(../somefolder/font-two.svg#svgFontName) format('svg');
}
于 2019-04-09T12:21:16.977 に答える
14
FOITを避ける：目に見えないテキストのフラッシュ
確かに、最初のステップはHTMLでフォントをプリロードすることです。
<link rel="preload" href="pacifico.woff2" as="font" crossorigin="anonymous">
フォントが同じサーバー上にある場合でも、フォントは常にクロスオリジンリソースシェアリング（CORS）が有効になっている状態でプリロードされることに注意してください。
CORSを有効にしてフェッチされたリソース（たとえば、fetch（）、XMLHttpRequest、フォント）をプリロードする場合は、要素にクロスオリジン属性を設定するために特別な注意を払う必要があります。フェッチがクロスオリジンでない場合でも、属性はリソースのCORSおよびクレデンシャルモードと一致するように設定する必要があります。
したがって、crossorigin="anonymous"属性は絶対に必要です。
type="MIME-type"オプション属性についても同じことは言えません。MIMEタイプのフォントがどうあるべきかについては、ブラウザと機関の間で多くの不一致があります。特定のブラウザで間違ったタイプが指定されている場合、フォントファイルはプリロードされません。したがって、HTML属性をまとめて使用することは控えたほうがよいでしょう。type="MIME-type"
次に、クールな子供たちがFOITと呼ぶものがあります。目に見えないテキストのフラッシュ。最近のブラウザでは、 CSS宣言にプロパティを追加することで、このFOITを簡単に回避できます。font-display: swap;@font-face
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(pacifico.woff2) format('woff2');
font-display: swap;
}
于 2021-03-21T23:18:19.480 に答える
4
この回答は最新ではありません
この更新された回答を参照してください：https ：//stackoverflow.com/a/46830425/4031815
非推奨の回答
フォントの読み込み時にちらつきを回避するための現在の手法はわかりませんが、フォントに適切なキャッシュヘッダーを送信し、そのリクエストができるだけ早く処理されるようにすることで、ちらつきを最小限に抑えることができます。
于 2009-08-25T20:43:31.480 に答える
4
適切なフォントのプリロードは、HTML5仕様の大きな穴です。私はこれらすべてのことを経験しました、そして私が見つけた最も信頼できる解決策はFont.jsを使うことです：
http://pomax.nihongoresources.com/pages/Font.js/
画像の読み込みに使用するのと同じAPIを使用してフォントを読み込むために使用できます
var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
console.log("font loaded");
}
それはグーグルの巨大なウェブフォントローダーよりもはるかにシンプルで軽量です
Font.jsのgithubリポジトリは次のとおりです。
于 2013-12-08T17:47:24.077 に答える
4
Googleのウェブフォントローダー経由
var fontDownloadCount = 0;
WebFont.load({
custom: {
families: ['fontfamily1', 'fontfamily2']
},
fontinactive: function() {
fontDownloadCount++;
if (fontDownloadCount == 2) {
// all fonts have been loaded and now you can do what you want
}
}
});
于 2015-06-24T03:53:05.223 に答える
3
私が見つけた最善の方法は、フォント面を含むスタイルシートをプリロードしてから、ブラウザに自動的にロードさせることです。他の場所（htmlページ）でfont-faceを使用しましたが、フォントの変更効果を簡単に観察できました。
<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">
次に、font.cssファイルで次のように指定します。
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('open-sans-v16-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}
リンクタグを介してプリロードされている場合、フォントに名前を割り当てることはできません（間違っている場合は修正してください。まだ方法が見つかりませんでした）。したがって、font-faceを使用してフォントに名前を割り当てる必要があります。リンクタグを使用してフォントをロードすることは可能ですが、フォントに名前を付けることはできないため、お勧めしません。font-faceのように名前がないと、Webページのどこでも使用できません。gtmetrixによると、スタイルシートが最初に読み込まれ、次に残りのスクリプト/スタイルが順番に読み込まれ、次にdomが読み込まれる前のフォントが読み込まれるため、フォント変更の効果は見られません。
于 2019-04-06T18:48:48.533 に答える
2
これを行うには、メインドキュメントに文字を追加して透明にし、ロードするフォントを割り当てました。
例えば
<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
于 2013-01-14T03:35:37.850 に答える
2
これで問題が解決するはずです。
あなたの最初の質問に答えるために：はい、あなたはそうすることができます。ただし、現在、GeckoおよびWebKitブラウザーのみがサポートしています。
頭にリンクタグを追加するだけです。
<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
于 2010-01-13T17:45:50.560 に答える
1
標準のCSSFontLoadingAPIを使用します。
（すべての）フォントがロードされるのを待ってから、コンテンツを表示します。
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.size, 'FontFaces loaded.');
document.getElementById('waitScreen').style.display = 'none';
});
于 2017-11-19T10:00:51.357 に答える
0
Googleには、このための優れたライブラリがあります。https ://developers.google.com/webfonts/docs/webfont_loader ほぼすべてのフォントを使用でき、libはhtmlタグにクラスを追加します。
certrainフォントがロードされてアクティブになったときのJavaScriptイベントも提供します。
フォントファイルをgzipで圧縮して提供することを忘れないでください！それは確かに物事をスピードアップします！
于 2013-03-07T13:30:53.153 に答える
0
最近、DOMがcanvas要素に限定されたCocoonJSと互換性のあるゲームに取り組んでいました-これが私のアプローチです：
まだロードされていないフォントでfillTextを使用すると、正しく実行されますが、視覚的なフィードバックはありません-したがって、キャンバスプレーンはそのまま残ります-必要なのは、キャンバスに変更がないか定期的にチェックすることです（たとえば、getImageDataをループして何かを検索するフォントが正しく読み込まれたときに発生する非透明ピクセル）。
このテクニックについては、最近の記事http://rezoner.net/preloading-font-face-using-canvas,686でもう少し説明しました。
于 2013-02-03T19:04:46.557 に答える