如何将 rel=preload 属性包含在 css 文件中的字体文件中答案

【问题标题】：how to include rel=preload attribute to font file inside css file如何将 rel=preload 属性包含在 css 文件中的字体文件中
【发布时间】：2020-10-10 23:01:02
【问题描述】：

如何在 css 文件中包含 rel=preload 属性到字体文件我在 css 文件中有用于加载字体文件的 css 代码

@font-face{font-family:FontAwesome;src:url(../fonts/fontawesome-webfont93e3.eot?v=4.4.0);src:url(../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.4.0) format('embedded-opentype'),url(../fonts/fontawesome-webfont93e3.woff2?v=4.4.0) format('woff2'),url(../fonts/fontawesome-webfont93e3.woff?v=4.4.0) format('woff'),url(../fonts/fontawesome-webfont93e3.ttf?v=4.4.0) format('truetype'),url(../fonts/fontawesome-webfont93e3.svg?v=4.4.0#fontawesomeregular) format('svg');

我想在字体文件中添加 rel=preload 属性以提高网站性能

请帮忙

【问题讨论】：

标签： css

【解决方案1】：

您可以像这样预加载字体：

<link rel="preload" href="../fonts/fontawesome-webfont93e3.eot?v=4.4.0" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">

https://wp-rocket.me/blog/font-preloading-best-practices/

【讨论】：

我试过这个但没有用仍然在 chrome lighthouse 中显示“考虑使用 <link rel=preload> 优先获取页面加载中当前请求的资源。”对于字体文件