Tailwind 是一种流行的 CSS 框架，它的特点是使用类名来定义样式，大大提高了 CSS 的可读性和可维护性。在 Tailwind 中使用自定义字体可以让页面更加个性化，本文将介绍如何在 Tailwind 中使用自定义字体。
1. 准备工作
在使用自定义字体之前，我们需要先准备好字体文件。通常情况下，字体文件有以下几种格式：
.ttf：TrueType 字体格式，适用于 Windows 和 macOS 系统；.otf：OpenType 字体格式，适用于 Windows 和 macOS 系统；.woff：Web Open Font Format，适用于 web；.woff2：Web Open Font Format 2.0，适用于 web。
我们需要将字体文件上传到服务器上，并记录下字体文件的 URL 地址。
2. 定义字体
在 Tailwind 中定义字体需要使用 @font-face 规则，它可以将自定义字体文件引入到页面中。在 @font-face 规则中，我们需要指定字体的名称、字体文件的 URL 地址和字体格式。
下面是一个示例：
@font-face {
font-family: 'My Font';
src: url('/path/to/font.woff2') format('woff2'),
url('/path/to/font.woff') format('woff');
}在上面的示例中，我们定义了一个名为 My Font 的字体，并指定了两个字体文件的 URL 地址。如果浏览器支持 woff2 格式的字体文件，就会优先使用 woff2 格式的字体文件。
3. 使用字体
在 Tailwind 中使用自定义字体需要先将字体名称添加到 fontFamily 配置中。在 tailwind.config.js 文件中，我们可以通过 theme.fontFamily 来定义字体名称。下面是一个示例：
-- -------------------- ---- -------
-------------- - -
------ -
----------- -
----- ---- ------ ------------ -------- --------------
------ ---- ------ ---------- ---------
----- ---- ------ -------- --------- -------------
--
--
--------- ---
-------- ---
-在上面的示例中，我们将 My Font 添加到了三个字体族中：sans-serif、serif 和 monospace。这样，在使用 Tailwind 的类名时，我们就可以通过 font-sans、font-serif 和 font-mono 来指定字体了。
下面是一个示例：
<div class="font-sans text-xl">Hello, world!</div>
在上面的示例中，我们将 font-sans 类名添加到了 div 元素上，并设置了文本大小为 text-xl。这样，这个 div 元素中的文本就会使用 My Font 字体了。
4. 总结
在 Tailwind 中使用自定义字体需要先将字体文件上传到服务器上，并记录下字体文件的 URL 地址。然后，在 @font-face 规则中定义字体，最后在 tailwind.config.js 文件中将字体名称添加到 fontFamily 配置中。通过这些步骤，我们就可以在 Tailwind 中使用自定义字体了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cc6e6fadd4f0e0ff5d2f5b