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

Question

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

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

-- Devtools 截图

我的字体文件是 .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 构建不会引发任何错误。

我已经尝试了这个相关问题中的两个答案，公认的答案实际上是我的实现，但到目前为止还没有好的结果。

如果有人可以帮助我，我将不胜感激！

编辑：我创建了一个 Github repo 来重现这个问题，它可以在这里找到，重现的所有步骤都在 README.MD 中

Answer 1

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

你有错误的格式值@font-face src。“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，因为所有主要浏览器都支持它。根据caniuse覆盖率，现在是 > 98%，所以在我看来，没有理由再使用 TTF。

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