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

Question

如何将 rel=preload 属性包含在 css 文件中的字体文件中 我在 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

Answer 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/