プリロード@font-face。

https://stackoverflow.com/questions/1330825

19-09-2019
|

質問

でプリロード又はキャッシュ@font-faceフォント、ものづくりのjavascriptを利用した前のページ負荷では得られないときには、いくつかのことを言ジャンプのページの最後には負荷?

解決

私は、しかし、あなたのフォントのための適切なキャッシュ・ヘッダーを送信し、その要求は、可能な限り迅速に経由することを確認することで、それを最小限に抑えることができ、フォントの負荷としてちらつきを避けるために、任意の現在の技術を認識していないよ。

他のヒント

簡単なテクニックは、あなたのインデックスにこのどこかに置くことです。

<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>

クロム34でテスト、サファリ7及びFF 29及びIE 11

ここで「プリロード」のためのいくつかのテクニックがあります。 http://paulirish.com/2009/fighting-the-font-face- FOUT / の

ほとんどはできるだけ高速なファイルをダウンロードするにブラウザをだまし..

また、データ-URI、多くのことができますようにそれを提供することができます。そしてまた、あなたがページのコンテンツを非表示にして、それを示すことができたときにその準備ができています。

2017:このようなプリロード

MDN:プリロードとの値の要素のrel属性です書証の取得要求にHTMLを指定する資源るページに必要なものをもうすぐロードした後に、そのため始めてみたいプリロードの初期のライフサイクルのページ負荷のブラウザのメインレンダリング機械の始ます。このこれは以前とがブロックのページの最初の描画、パフォーマンスが改善して

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

チェックブラウザの互換性.

最も有用なフォントのプリロード(待たずにブラウザで一部CSS).またプリロードの一部のロゴ、アイコンとのイントロダクションです。

その他の技術ニュースリリース連結会議こちらの（私のすることなどを指しています。

適切なフォントプレローディングは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");
}

これは、はるかに簡単かつより軽量の Googleの図体の大きいWebfontローダーする

ここでFont.jsためのgithubのレポです。

https://github.com/Pomax/Font.jsする

このには、あなたの問題を解決する必要があります。

はいあなたはのことができます。

あなたの初期の質問に答えるために。のみのGeckoやWebKitのブラウザは、現在、しかし、それをサポートしています。
あなたは自分の頭の中でリンクタグを追加する必要があります：

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">

Googleの webfontloaderする

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
        }
    }
});

私は私のメイン文書にいくつかの文字を追加することによって、これをしなかったし、それを透明にして、私はロードしたいフォントを割り当てられます。

例えばます。

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>

標準の CSSのフォントのロードAPI を使用してください。

フォントをロードし、その後、あなたのコンテンツを表示するために（のすべてのの）のを待ちます：

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

のデモCodePen のを。

最近、私はcanvas要素に制限DOMとCocoonJSと互換性のゲームに取り組んでいた - ここに私のアプローチです：

正常に実行されます、まだロードされますが、視覚的なフィードバックとされていないフォントでfillTextを使用した - のでそのまま滞在するキャンバスプレーン - あなたがしなければならないすべては、定期的にgetImageDataをループ例えば（すべての変更のためのキャンバスをチェックしていますどうなること）以外の透明画素を検索する際に適切にフォントをロードます。

私は私の最近の記事でもう少しこの手法を説明したのhttp：/ /rezoner.net/preloading-font-face-using-canvas,686する

Googleは、このための素晴らしいライブラリがあります。 https://developers.google.com/webfonts/ドキュメント/ webfont_loaderするあなたは、ほぼすべてのフォントを使用することができるとlibは、HTMLタグにクラスを追加します。

certrainフォントがロードされたときに

それも、あなたはjavascriptのイベントになりますアクティブ！

gzip圧縮されたあなたのfontfilesにサービスを提供することを忘れないでください！それは確かに物事をスピードアップします！

しかするのが最善だと思いますっては、プリロードスタイルシートが含まれるフォントフェース、ブラウザへの負荷します。を使用したフォント面を他の場所は、htmlページ）ですが、そのフォント変化の効果を簡潔に話せるようになる。

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

そして揺るぎないコミットメントです。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 */
}

できないとして名前をつけるフォントでの予圧をリンクタグ（訂正いた間違っていたんすい)、このように使用フォント面に割り当ての名称、商標または登録商標です。もので荷重フォントをリンクタグはないとして推奨できませんが割り当て名前のフォントです。名前などのフォント、がっかりすることはないはずだが、どこでもお使いいただけるウェブページです。にgtmetrix、スタイルシートの負荷では、これからのスクリプト/スタイルにより、そのフォントの前にドが読み込まれ、そこではあまり見かけないフォントを変えます。

次のようにあなたの頭がプリロード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');
}

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow