使用Rel=“预加载”将自定义字体文件入队

时间:2019-11-29 作者:anega

我在我的WP网站上使用自定义字体。它现在包含在@font-face css属性。但我想知道有没有办法wp_enqueue 此文件具有属性rel="preload" 可能还有其他一些属性。所以在浏览器中看起来像这样:

<link rel="preload" href="/fonts/custom-font-folder/CustomFontFile.woff2" as="font" type="font/woff2" crossorigin="anonymous">
提前谢谢你。

1 个回复
SO网友:DanLewis

您可以尝试使用style_loader_tag 滤器

add_action(\'wp_enqueue_scripts\', \'my_enqueue_scripts\');

function my_enqueue_scripts() {
    wp_enqueue_style(\'my-style-handle\',
        \'/fonts/custom-font-folder/CustomFontFile.woff2\', array(), null);
}

add_filter(\'style_loader_tag\', \'my_style_loader_tag_filter\', 10, 2);

function my_style_loader_tag_filter($html, $handle) {
    if ($handle === \'my-style-handle\') {
        return str_replace("rel=\'stylesheet\'",
            "rel=\'preload\' as=\'font\' type=\'font/woff2\' crossorigin=\'anonymous\'", $html);
    }
    return $html;
}
在这里,我们使用普通wp_enqueue_style 作用然后,我们使用过滤器捕获输出并替换它的rel 属性和更新的属性。

相关推荐

Using True Type Fonts (ttf)

我在网上找到了一些不错的True Type字体,我想在我的WP博客的特定主题中使用它们来扮演特定角色(例如。,H2 或帖子标题)。如何更改主题以使用这些角色的字体?