小编Ker*_*nix的帖子

因此，我正在使用 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: …