プリロード@font-face。
-
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のレポです。
このには、あなたの問題を解決する必要があります。
はいあなたはのことができます。あなたの初期の質問に答えるために。のみの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';
});
最近、私は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');
}