在使用 Tailwind CSS 进行前端开发时，经常需要使用自定义字体来满足设计需求。但是，在使用自定义字体时，有时会发现字体粗细失效的问题，即无论设置 bold 还是 normal，字体都显示为 normal。这个问题的解决方法如下。
问题分析
首先，我们需要了解 Tailwind CSS 的字体粗细设置是如何实现的。在 Tailwind CSS 中，字体粗细的设置是通过 font-weight 属性来实现的。例如，要设置字体为粗体，可以使用以下类名：
font-bold
这个类名会将 font-weight 属性设置为 700。同理，要设置字体为普通字体，可以使用以下类名：
font-normal
这个类名会将 font-weight 属性设置为 400。
但是，在使用自定义字体时，如果字体文件中没有包含粗体和普通字体的不同版本，那么上述类名的设置就会失效，无论设置 bold 还是 normal，字体都显示为 normal。
解决方法
为了解决这个问题，我们需要为自定义字体添加粗体和普通字体的不同版本。具体来说，我们需要在字体文件中添加以下两个版本：
- 普通字体版本：这个版本的 font-weight 属性应该设置为 400。
- 粗体版本：这个版本的 font-weight 属性应该设置为 700。
在添加完这两个版本后，我们需要在 CSS 中使用 @font-face 规则来引入这两个版本。例如，假设我们的自定义字体文件名为 "myfont.ttf"，我们可以使用以下代码来引入这两个版本：
-- -------------------- ---- ------- ---------- - ------------ --------- ---- ----------------- ------------------- ------------ ---- ----------- ------- - ---------- - ------------ --------- ---- ----------------- ------------------- ------------ ---- ----------- ------- -
在上述代码中，我们使用了两个 @font-face 规则来引入普通字体版本和粗体版本。注意，这两个规则的 font-weight 属性分别设置为 400 和 700，这样就能保证 Tailwind CSS 的 font-weight 设置能够生效。
最后，我们只需要在 HTML 中使用自定义字体的类名即可。例如，要使用粗体版本的自定义字体，可以使用以下类名：
font-bold font-myfont
其中，font-myfont 是我们为自定义字体添加的类名。
结论
在使用 Tailwind CSS 进行前端开发时，如果需要使用自定义字体，就需要为字体添加粗体和普通字体的不同版本，并使用 @font-face 规则来引入这两个版本。这样才能保证 Tailwind CSS 的 font-weight 设置能够生效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6758eef362956301acd1fdf6