在 CSS 文件中预加载字体

Question

我有一个很棒的字体 CSS-Fille，我将其加载到我网站的页脚中。在 CSS 文件中，字体加载如下：

font-display:swap;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) 
format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa- 
brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf)......

不是我在寻找预加载这些字体的解决方案。有简单的方法吗？

Answer 1

不确定这是否是您的意思，但您可以在单独的 css 文件中定义 font-face，例如：

@font-face {
  font-family: faBrands;
  font-weight: 400;
  src: url('/webfonts/fa-brands-400.eot');
}

@font-face {
  font-family: faBrands;
  font-weight: 400;
  src: url('/webfonts/fa-brands-500.eot');
}

假设文件夹webfonts在public下，你可以在css文件中写入：

font-family: faBrands;

确保先导入字体 css 文件。

在 CSS 文件中预加载字体

Preloading fonts in CSS File

css

preload