Tailwind CSS 是一个流行的 CSS 框架，它以原子类为基础，提供了丰富的 CSS 样式和工具类。它具有简单易用、高度可定制、可维护性强等优点，因此得到了越来越多前端开发者的青睐。其中，自定义字体是常见的需求之一，下面我们就来介绍如何在 Tailwind CSS 中实现自定义字体。
1. 添加字体文件
首先，在 Tailwind CSS 中添加自定义字体需要在项目中添加字体文件。一般来说，我们会将字体文件放置在项目的某个目录下，例如 src/fonts 目录下，然后在 CSS 文件中引入该字体文件：
@font-face {
font-family: 'My Custom Font';
src: url('/src/fonts/my-custom-font.ttf') format('truetype');
}这样就可以在 CSS 中使用自定义字体了。为了方便使用，我们也可以在 Tailwind CSS 配置文件中添加自定义字体的配置：
-- -------------------- ---- -------
-- ------------------
-------------- - -
------ -
------- -
----------- -
------- ---- ------ ------ --------------------------------
-
-
--
--------- -
------- ---
--
-------- ---
-以上代码中，我们在 theme 中的 fontFamily 中添加了 custom 字体系列，其值为 My Custom Font，这样在 Tailwind CSS 中即可使用自定义字体系列了。
2. 使用自定义字体
当字体文件添加成功并配置好后，我们就可以在 Tailwind CSS 中使用自定义字体了，例如：
<!-- 使用自定义字体 --> <div class="font-custom">Hello, World!</div>
以上代码中，我们在 div 元素上添加了 font-custom 类，这样该元素就可以使用 custom 字体系列了。
除了直接在 HTML 中使用，我们也可以在 CSS 文件中使用，例如：
.body {
font-family: 'My Custom Font';
}
.nav-text {
font-family: custom;
}以上代码中，我们在 .body 元素上直接使用 My Custom Font，而在 .nav-text 元素上则使用 custom 自定义字体系列。
3. 自定义字体的变体
在使用自定义字体时，通常我们需要为不同的字体样式配置不同的变体，例如粗体、斜体等。在 Tailwind CSS 中，我们可以通过以下方式来指定字体变体：
-- -------------------- ---- -------
-- ------------------
-------------- - -
------ -
------- -
----------- -
------- -
------ ----
------- ----
----- ----
--
--
---------- -
------- -
------- ---------
--
--
--
--
--------- -
------- ---
--
-------- ---
-以上代码中，我们在 theme 中的 fontWeight 中添加了 custom 字体系列，其值为 { light: 300, normal: 400, bold: 700 }，这样在 Tailwind CSS 中即可使用 custom-light、custom-normal、custom-bold 类来指定不同的字体变体。
我们也可以在 theme 中的 fontStyle 中配置自定义字体的斜体，例如：
.font-custom-italic {
font-family: 'My Custom Font';
font-style: italic;
}以上代码中，我们在 .font-custom-italic 元素上指定了自定义字体的斜体。
总结
通过以上步骤，我们可以在 Tailwind CSS 中实现自定义字体。简单来说，我们需要添加字体文件并在 CSS 文件中引入，然后在 Tailwind CSS 的配置文件中配置自定义字体并添加字体变体，最后在 HTML 或 CSS 中使用。自定义字体具有一定的应用价值，可以为页面增添独特的视觉效果，适用于不同类型的网站或应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ac2b8968c7c53b0d16352