如何在 TailwindCSS 和 NuxtJS 中使用自定义字体？

Question

所以我正在使用 NuxtJS 构建一个网站，并使用 Tailwind CSS 作为我的样式。我正在使用@nuxtjs/tailwindcss 模块。

问题是我的字体似乎没有加载到浏览器上。正如您在 devtools 屏幕截图中看到的那样，正确的 font-family 仍然由 CSS 应用，但浏览器仍然使用 Times New Roman 呈现我的文本。

--Devtools Screenshot

我的字体文件是 .ttf 文件，存储在我项目根目录的 /assets/fonts/ 文件夹中。

我的tailwind.css 文件看起来像这样

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  src: url('../fonts/Montserrat-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  src: url('../fonts/Montserrat-Bold.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 900;
  src: url('../fonts/Montserrat-Black.ttf') format('ttf');
}

而我的tailwind.config.js 看起来像这样

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Montserrat'],
      serif: ['Montserrat'],
      mono: ['Montserrat'],
      display: ['Montserrat'],
      body: ['Montserrat']
    },
    // Some more irrelevant theme customization
 },
  variants: {},
  plugins: []
}

我想完全覆盖 Tailwind 的基本字体，所以我没有使用 extend，我计划在弄清楚如何正确执行此操作后清理它并为某些文本使用其他字体。

我的直觉告诉我 Tailwind 不是问题所在，因为 Devtools 实际上将 Montserrat 显示为计算字体，并且 webpack 构建不会引发任何错误。

我已经尝试了this related question 中的两个答案，接受的一个实际上是我的实现，但到目前为止没有好的结果。

如果有人可以帮助我，我将非常感激！

编辑：我创建了一个 Github 存储库来重现该问题，它可以在 here 找到，并且所有重现步骤都在 README.MD 中

Answer 1

这不是 Tailwind、Vue 或 Nuxt 的问题 - 只是在 CSS 中。

@font-facesrc 中的格式值有误。 “ttf”是扩展名，而不是格式名称。它应该是“truetype”。实际上，对于 woff 或 svg，扩展名与格式名称相同，因此可能会与“ttf”和“truetype”混淆。

所以只需替换：

src: url('../fonts/Montserrat-Regular.ttf') format('ttf');

与：

src: url('../fonts/Montserrat-Regular.ttf') format('truetype');

或者删除格式，因为没有它也可以工作。

src: url('../fonts/Montserrat-Regular.ttf');

WOFF

此外，最好使用更新和更小的格式：woff 和 woff2。

src:
  url('../fonts/Montserrat-Regular.ttf') format('truetype'),
  url('../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../fonts/Montserrat-Regular.woff') format('woff')

我个人只使用 woff 和 woff2，因为所有主流浏览器都支持它。 Based on caniuse coverage, for now is > 98%，所以在我看来，没有理由再使用TTF了。

src:
  url('../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../fonts/Montserrat-Regular.woff') format('woff')