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

Posted 2023-02-22

【中文标题】Nuxt.js：包含字体文件：使用 /static 或 /assets

【英文标题】：Nuxt.js: Include font files: use /static or /assets

【发布时间】：2018-11-13 10:59:25

【问题描述】：

我知道 nuxt.js github repo 中的一些帖子对此有所介绍，但我想知道在 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

【问题讨论】：

嘿，看看这个answer。我觉得有点相关

【参考方案1】：

官方文档中解释的很好：https://nuxtjs.org/guide/assets/

assets\ 保留用于要处理的资产（例如，concat css 与 webpack）

static\ 可用于从根 url (static\img\test.jpg => http://example.fr/img/test.jpg) 公开所有静态文件，无需任何处理

【讨论】：

好的。我不知何故没有找到这个。感谢您的澄清。干杯

文档没有回答这个问题。哪个更适合字体？如果您正在加载 Google 字体，您是否应该从 CDN 加载它们？如果是，您在应用程序的哪个位置加载？

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

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