导入 typekit url 时使用字体显示答案

【问题标题】：Using font display when importing typekit url导入 typekit url 时使用字体显示
【发布时间】：2019-02-28 12:27:41
【问题描述】：

我收到关于 Pagespeed 的警告，

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

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

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

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

【问题讨论】：

标签： css sass pagespeed typekit

【解决方案1】：

在使用 JS 版本的 typekit 时，我想出了这个 hack（我的字体名称是 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;
})();

【讨论】：

【解决方案2】：

这是我在为本地提供的字体修复 font-display 时发现的一些信息。它基本上说今天没有这样的解决方案，因为 Typekit 控制了提供的@font-face，但请阅读文章。

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

【讨论】：