Question

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

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

我的字体文件是.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-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，因为所有主要浏览器都支持它。 Based on caniuse coverage, for now is > 98%，因此我认为不再需要使用TTF。

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

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

1 个答案: