Tailwind css font-family 类没有按预期呈现

Question

上下文

我想在我的一个 vuejs 2 项目中使用 tailwind css 3.0。我正确设置了 tailwind css 以使其在我的项目中工作。

我想做什么

我想从 tailwind css 得到的第一件事是字体管理。我尝试做的第一件事是使用字体系列修饰符 font-sans，因为它被解释为 here。所以在给定的 div 中我添加了 classes ：font-sans 和 font-semibold 这只是一个字体大小修饰符。

如我所料

因此，如果我返回顺风 css 网站，他们会向我们展示将 font-sans class 添加到文本 here 的结果，看起来像这样（准确地说，本文中应用的所有 classes 是：font-sans text-lg font-medium text-gray-900）：

所以我在我的项目上做了同样的事情，我得到了这个：

问题

我们很容易看出这两个句子的风格不一样（字体系列有问题）。而且我不明白为什么它们没有相同的渲染，因为它们具有完全相同的 classes.

感谢您花时间解决这个问题，如果您需要更精确的信息，请问我

Answer 1

Tailwind 网站为其网站使用自定义字体（特别是 Inter var）：

font-family: Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji

如果您想自定义它，可以在 tailwind.config:

中进行

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

Tailwind css font-family 类没有按预期呈现

Tailwind css font-family classes are not rendering as they should

css

tailwind-css

Tailwind css font-family 类 没有按预期呈现

Tailwind css font-family classes are not rendering as they should

css

tailwind-css

Tailwind css font-family 类没有按预期呈现