82

Google の Web Fonts API は、フォントの読み込みが完了した場合、または読み込めなかった場合などに実行されるコールバック関数を定義する方法を提供します。CSS3 Web フォント (@font-face) を使用して同様のことを達成する方法はありますか?

4

5 に答える 5

142

2015年アップデート

Chrome 35 以降と Firefox 41 以降は、CSS フォント読み込み API ( MDN、W3C ) を実装しています。を呼び出しdocument.fontsてFontFaceSetオブジェクトを取得します。このオブジェクトには、フォントの読み込み状態を検出するための便利な API がいくつかあります。

  • check(fontSpec)- 指定されたフォント リスト内のすべてのフォントが読み込まれて使用可能かどうかを返します。は、フォントfontSpecの CSS 短縮構文を使用します。例：
    document.fonts.check('bold 16px Roboto'); // true or false
  • document.fonts.ready-フォントの読み込みとレイアウト操作が完了したことを示すPromiseを返します。
    例：document.fonts.ready.then(function () { /*... all fonts loaded...*/ });

以下は、これらの API を示すスニペットとdocument.fonts.onloadingdone、フォント フェイスに関する追加情報を提供する です。

alert('Roboto loaded? ' + document.fonts.check('1em Roboto'));  // false

document.fonts.ready.then(function () {
  alert('All fonts in use by visible text have loaded.');
   alert('Roboto loaded? ' + document.fonts.check('1em Roboto'));  // true
});

document.fonts.onloadingdone = function (fontFaceSetEvent) {
   alert('onloadingdone we have ' + fontFaceSetEvent.fontfaces.length + ' font faces loaded');
};
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<p style="font-family: Roboto">
  We need some text using the font, for the font to be loaded.
  So far one font face was loaded.
  Let's add some <strong>strong</strong> text to trigger loading the second one,
    with weight: 700.
</p>

IE 11 は API をサポートしていません。IE をサポートする必要がある場合は、利用可能なポリフィルまたはサポート ライブラリを確認してください。

于 2015-08-30T03:29:03.663 に答える
19

Safari、Chrome、Firefox、Opera、IE7、IE8、IE9 でテスト済み:

function waitForWebfonts(fonts, callback) {
    var loadedFonts = 0;
    for(var i = 0, l = fonts.length; i < l; ++i) {
        (function(font) {
            var node = document.createElement('span');
            // Characters that vary significantly among different fonts
            node.innerHTML = 'giItT1WQy@!-/#';
            // Visible - so we can measure it - but not on the screen
            node.style.position      = 'absolute';
            node.style.left          = '-10000px';
            node.style.top           = '-10000px';
            // Large font size makes even subtle changes obvious
            node.style.fontSize      = '300px';
            // Reset any font properties
            node.style.fontFamily    = 'sans-serif';
            node.style.fontVariant   = 'normal';
            node.style.fontStyle     = 'normal';
            node.style.fontWeight    = 'normal';
            node.style.letterSpacing = '0';
            document.body.appendChild(node);

            // Remember width with no applied web font
            var width = node.offsetWidth;

            node.style.fontFamily = font;

            var interval;
            function checkFont() {
                // Compare current width with original width
                if(node && node.offsetWidth != width) {
                    ++loadedFonts;
                    node.parentNode.removeChild(node);
                    node = null;
                }

                // If all fonts have been loaded
                if(loadedFonts >= fonts.length) {
                    if(interval) {
                        clearInterval(interval);
                    }
                    if(loadedFonts == fonts.length) {
                        callback();
                        return true;
                    }
                }
            };

            if(!checkFont()) {
                interval = setInterval(checkFont, 50);
            }
        })(fonts[i]);
    }
};

次のように使用します。

waitForWebfonts(['MyFont1', 'MyFont2'], function() {
    // Will be called as soon as ALL specified fonts are available
});
于 2012-07-27T13:39:15.643 に答える
12

Google Web Fonts API (および Typekit) で使用される JS ライブラリは、サービスなしで使用できます: WebFont Loader。

それはあなたが尋ねるもののためのコールバックを定義します.

于 2011-04-15T17:03:52.737 に答える
-6

window.load イベントは、すべてがロードされたときに発生します。これにはフォントが含まれている必要があります。したがって、それをコールバックとして使用できます。ただし、Web フォント ローダーを

google、typekit、ascender、および monotype オプションに加えて、任意の Web フォント プロバイダーからスタイルシートをロードできるカスタム モジュールもあります。

WebFontConfig = { custom: { 家族: ['OneFont', 'AnotherFont'], urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css', 'http://yetanotherwebfontprovider.com/stylesheet2.css' ] } };

ライブラリは、指定したプロバイダーに関係なく、同じイベントを送信します。

于 2011-04-15T17:12:30.857 に答える