6

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

问题是我的字体似乎没有在浏览器上加载。font-family正如您在 devtools 屏幕截图中看到的那样，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 构建不会引发任何错误。

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

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

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

4

1 回答 1

16

这不是 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')
于 2020-05-23T21:57:59.437 回答