预加载密钥请求 - 浏览器不使用字体答案

【问题标题】：Preload key requests - Font is not used by browser预加载密钥请求 - 浏览器不使用字体
【发布时间】：2021-05-17 20:27:48
【问题描述】：

我们正在使用 TheGem WordPress 主题，它在 header.php 中有一个预先添加的代码。我们没有添加任何预加载链接，也没有使用任何插件，但 Google PageSpeed Insights 显示错误

“警告：为“Font-URL”找到预加载 <link>，但未找到由浏览器使用。检查您是否使用crossorigin 属性正确。”

现在我们想禁用此 PHP 代码，但每当我们编辑此代码时，它会破坏整个网站，或者即使在编辑后我们再次看到错误。

    <?php
    if (thegem_get_option('font_preload_enabled')) {
        $fonts = thegem_get_option('font_preload_preloaded_fonts');
        $additionalFonts = thegem_additionals_fonts();
        $sysFontUri = get_template_directory_uri().'/fonts/';

        $sysFonts = array(
            'Thegem Icons' => $sysFontUri.'thegem-icons.woff',
            'Elegant Icons' => $sysFontUri.'elegant/ElegantIcons.woff',
            'Materialdesign Icons' => $sysFontUri.'material/materialdesignicons.woff',
            'Fontawesome Icons' => $sysFontUri.'fontawesome/fontawesome-webfont.woff',
            'Thegem Socials' => $sysFontUri.'thegem-socials.woff',
        );

        foreach(explode(',', $fonts) as $font) {
            $url = isset($sysFonts[$font]) ? $sysFonts[$font]:'';
            if (!$url) {
                foreach($additionalFonts as $additionalFont) {
                    if ($additionalFont['font_name'] == $font && isset($additionalFont['font_url_woff'])) {
                        $url = $additionalFont['font_url_woff'];
                        break;
                    }
                }
            }

            if ($url) {
                echo '<link rel="preload" as="font" crossorigin="anonymous" type="font/woff" href="'.$url."\">\n";
            }
        }
    }
?>

有人帮助将其禁用，因此我们将通过交换手动添加预加载字体。谢谢

【问题讨论】：

标签： javascript php wordpress pagespeed preload

【解决方案1】：

此脚本为这些字体中的每一种添加了一个<link> 标签，但您没有使用其中的一种或多种。所有这些集合之间有很多重叠（比如 FontAwesome 和 Material Design 都有保存、上传、菜单等图标），并且它们的主题是一致的。您可能只想加载其中的一个，无论您的网站使用的是哪个。

要解决此问题，请查看您的 CSS 并查找 @font-face - 这些链接只是预加载，实际上设置图标字体的是 @font-face。如果其中任何一个没有匹配的@font-face，那么您可以安全地删除它们。

【讨论】：

非常感谢