Nuxt.js：包括字体文件：使用 /static 或 /assets

Question

我知道nuxt.js的github库中有一些帖子介绍了这方面的内容，但我想知道在nuxt.js中正确使用字体文件的方法是什么。

目前，我们将它们放在/static/fonts目录中，但其他人使用assets存储字体文件。 有什么区别吗？ 如果有更好的选项，那么哪个更好，为什么？

此外，还有不同的包含它们的方式。 像这样的路径是否正确：

@font-face {
  font-family: 'FontName';
  font-weight: normal;
  src: url('~static/fonts/font.file.eot'); /* IE9 Compat Mode */
  src: url('~static/fonts/font.file.woff') format('woff'),
       url('~static/fonts/font.file.otf') format('otf'),
       url('~static/fonts/font.file.eot') format('eot');
}

感谢您在此做出澄清：D 干杯 J

- Merc

---

嘿，看看这个答案。我认为它有点相关。 - Vamsi Krishna

Answer 1

官方文档已经对此进行了很好的解释：https://nuxtjs.org/guide/assets/

assets\ 用于处理（例如使用webpack合并css）的资产文件。

static\ 可以将所有静态文件从根URL公开(ex: static\img\test.jpg => http://example.fr/img/test.jpg)，不经任何处理。

- Nicolas Pennec

---

好的。我不知道这个。感谢澄清。干杯。 - Merc

文档没有回答这个问题。对于字体来说哪种更好？如果要加载 Google 字体，应该从 CDN 加载它们吗？如果是的话，在应用程序中应该在哪里加载它们？ - ccleve

如果要从CDN导入资源（例如字体），更好的方法是在您的“nuxt.config.js”文件中声明它，如文档中所述：https://nuxtjs.org/faq/#global-settings。@ccleve - Nicolas Pennec

https://nuxtjs.org/docs/2.x/directory-structure/assets#fonts - Steve88

实际上，文档最初说明资产是用于存储图片、Sass文件和字体的目录，但随后也指出您还可以使用静态文件夹。 我认为由于字体文件的特性，您不希望通过webpack进行处理或修改它们，因此将它们存储在“static”文件夹中会更好一些。 或者我有什么遗漏的吗？ - Merc