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

Question

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

问题是我的字体似乎没有在浏览器上加载。正确的 font-family 仍然被 CSS 应用，正如您在 devtools 屏幕截图中看到的那样，但是浏览器仍然使用 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 构建不会抛出任何错误。

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

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

编辑：我创建了一个重现该问题的 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 中使用自定义字体？

How do you use custom fonts with TailwindCSS and NuxtJS?

css

fonts

vue.js

tailwind-css

nuxtjs