Question

我收到有关Pagespeed的警告，

确保在webfont加载期间文本仍然可见

我已经解决了这个问题，网上的人说要确保字体声明块中包含font-display: fallback参数，但是我像这样通过typekit加载字体

 @import url("https://use.typekit.net/111111.css");

通过上述方法加载字体时，如何将font-display: fallback参数应用于我的字体，以防止Pagespeed抱怨它？

Answer 1

这里有一些我在修复本地服务字体的font-display时发现的信息。它基本上说，目前还没有这样的解决方案，因为Typekit控制着所提供的@font-face，但确实要阅读本文。

https://css-tricks.com/font-display-masses/#article-header-id-4

Answer 2

当使用JS版本的typekit时，我想到了这种方法（我的字体名称是proxima-nova）：

(function () {
    if (typeof MutationObserver === 'undefined') {
        return;
    }
    var fixFontDisplay = function () {
        // inject font-display option into typekit fonts
        var styles = document.getElementsByTagName('style');
        for (var i = 0; i < styles.length; i++) {
            if (
                styles[i].innerText
                && styles[i].innerText.indexOf('proxima-nova') !== -1
                && styles[i].innerText.indexOf('@font-face{font-display:swap;') === -1
            ) {
                styles[i].innerText = styles[i].innerText
                        .split('@font-face{').join('@font-face{font-display:swap;');
            }
        }
    };
    var observer = new MutationObserver(function (mutationsList, observer) {
        for (var i = 0; i < mutationsList.length; i++) {
            fixFontDisplay();
        }
    });
    observer.observe(
        document.getElementsByTagName('head')[0],
        {attributes: false, childList: true, subtree: false}
    );
    window.fixFontObserver = observer;
})();

导入Typekit网址时使用字体显示

2 个答案: