Nuxt.js没有正确导入字体面孔

Question

我正在使用Nuxt项目的自定义字体文件。我试着将字体文件添加到staticfonts中，并使用以下方法导入它们

  font-family: 'coconregular';
  src: url('fonts/cocon-regular-font.woff2') format('woff2'),
       url('fonts/cocon-regular-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

$cocon: 'coconregular';

.brand-name {
  font-family: $cocon;
}

我安装了'@nuxtjsstyle-resources'，所有其他变量和SCSS加载工作完全正常，但字体没有加载。

这是我的文件结构文件截图

我找不到正确添加字体的方法，也不知道如何检查字体是否已加载。没有任何错误。

Nuxt和SCSS加载字体文件的正确方法是什么？

Answer 1

所以，我终于想出了一个很好的变通方法。我不知道这是否是好的，但我把字体下载和其他东西分开了。 因此我在nuxt.config.js中添加了另一个入口点，把字体样式表放在其他东西之前。

css: [
    '@/assets/scss/theme/fonts/stylesheet.css',
    '@/assets/scss/main.scss'
  ],

这很好，因为我的Woff和Woff2文件的字体样式表是由font squirrel生成器生成的。

希望这对你们有帮助