解决 Tailwind 中的字体问题

在使用 Tailwind 进行前端开发时，我们经常需要使用自定义字体来满足设计需求。然而，有时候我们会遇到字体无法正常显示的问题，这可能是因为字体文件的路径不正确或者字体格式不支持。本文将介绍如何解决 Tailwind 中的字体问题。

1. 确认字体文件路径

首先，我们需要确认字体文件的路径是否正确。在 Tailwind 中，我们可以通过 font-family 属性来指定字体，例如：

<div class="font-sans">Hello, world!</div>

这里使用了默认的 Sans Serif 字体，如果我们要使用自定义字体，可以在 tailwind.config.js 文件中定义：

// javascriptcn.com 代码示例
module.exports = {
  theme: {
    fontFamily: {
      custom: ['Noto Sans', 'sans-serif'],
    },
  },
  variants: {},
  plugins: [],
}

这里我们定义了一个名为 custom 的字体族，它包含了 Noto Sans 和 Sans Serif 两种字体。然后我们就可以在 HTML 中使用这个字体族了：

<div class="font-custom">Hello, world!</div>

但是，如果我们的字体文件路径不正确，就会出现字体无法正常显示的问题。我们可以通过在 tailwind.config.js 文件中指定字体文件路径来解决这个问题：

// javascriptcn.com 代码示例
module.exports = {
  theme: {
    fontFamily: {
      custom: ['Noto Sans', 'sans-serif'],
    },
    extend: {
      fontFamily: {
        custom: ['Noto Sans', 'sans-serif'],
      },
      // 指定字体文件路径
      fontFace: {
        'noto-sans': {
          src: 'url("/fonts/noto-sans.woff2") format("woff2")',
          fontWeight: 400,
          fontStyle: 'normal',
        },
      },
    },
  },
  variants: {},
  plugins: [],
}

这里我们使用了 fontFace 属性来指定字体文件路径。注意，这里的路径是相对于 public 目录的。如果字体文件放在 public/fonts 目录下，路径应该是 url("/fonts/noto-sans.woff2")。

2. 确认字体格式

除了路径问题外，字体格式也可能会导致字体无法正常显示。在 Tailwind 中，我们可以使用 .woff2、.woff、.ttf 和 .otf 等字体格式。但是，不同的浏览器对字体格式的支持程度不同，因此我们需要确认字体格式是否被浏览器支持。

在 tailwind.config.js 文件中，我们可以使用 fontFace 属性来指定字体格式。例如，如果要使用 Noto Sans 字体，我们可以这样定义：

// javascriptcn.com 代码示例
module.exports = {
  theme: {
    fontFamily: {
      custom: ['Noto Sans', 'sans-serif'],
    },
    extend: {
      fontFamily: {
        custom: ['Noto Sans', 'sans-serif'],
      },
      fontFace: {
        'noto-sans': {
          // 指定多种字体格式
          src: 'url("/fonts/noto-sans.woff2") format("woff2"), url("/fonts/noto-sans.woff") format("woff"), url("/fonts/noto-sans.ttf") format("truetype")',
          fontWeight: 400,
          fontStyle: 'normal',
        },
      },
    },
  },
  variants: {},
  plugins: [],
}

这里我们指定了三种字体格式，分别是 .woff2、.woff 和 .ttf。这样做的好处是，如果浏览器不支持某种字体格式，它会自动使用下一种支持的格式来显示字体。

3. 总结

通过上面的介绍，我们可以解决 Tailwind 中的字体问题。具体来说，我们需要确认字体文件路径是否正确，并指定字体格式。通过这些方法，我们可以让字体正常显示，满足设计需求。

完整的示例代码如下：

// javascriptcn.com 代码示例
module.exports = {
  theme: {
    fontFamily: {
      custom: ['Noto Sans', 'sans-serif'],
    },
    extend: {
      fontFamily: {
        custom: ['Noto Sans', 'sans-serif'],
      },
      fontFace: {
        'noto-sans': {
          src: 'url("/fonts/noto-sans.woff2") format("woff2"), url("/fonts/noto-sans.woff") format("woff"), url("/fonts/noto-sans.ttf") format("truetype")',
          fontWeight: 400,
          fontStyle: 'normal',
        },
      },
    },
  },
  variants: {},
  plugins: [],
}

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fa25095b1f8cacd852bc4