Tailwind CSS on GitHub

字体粗细

用来控制字体粗细的功能类

Default class reference

Class
Properties
font-thinfont-weight: 100;
font-extralightfont-weight: 200;
font-lightfont-weight: 300;
font-normalfont-weight: 400;
font-mediumfont-weight: 500;
font-semiboldfont-weight: 600;
font-boldfont-weight: 700;
font-extraboldfont-weight: 800;
font-blackfont-weight: 900;

使用方法

使用 font-{weight} 功能类来控制元素字体粗细。

thin
The quick brown fox jumped over the lazy dog.
extralight
The quick brown fox jumped over the lazy dog.
light
The quick brown fox jumped over the lazy dog.
normal
The quick brown fox jumped over the lazy dog.
medium
The quick brown fox jumped over the lazy dog.
semibold
The quick brown fox jumped over the lazy dog.
bold
The quick brown fox jumped over the lazy dog.
extrabold
The quick brown fox jumped over the lazy dog.
black
The quick brown fox jumped over the lazy dog.
<p class="font-thin ...">The quick brown fox ...</p>
<p class="font-extralight ...">The quick brown fox ...</p>
<p class="font-light ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>
<p class="font-extrabold ...">The quick brown fox ...</p>
<p class="font-black ...">The quick brown fox ...</p>

响应式

要在特定的断点处控制元素的字体粗细,请在任何现有的字体粗细功能类前添加 {screen}: 前缀。例如,使用 md:font-bold 来仅在中等大小及以上的屏幕应用 font-bold 功能类。

<p class="font-normal md:font-bold ...">The quick brown fox jumped over the lazy dog.</p>

关于 Tailwind 的响应式设计功能的更多信息,请查看 响应式设计 文档。

定制

Font Weights

默认情况下,Tailwind 提供了10个 font-weight 功能类。您可以通过编辑您的 Tailwind 配置中的 theme.fontWeight 部分来改变、添加或删除这些功能类。

  // tailwind.config.js
  module.exports = {
    theme: {
      fontWeight: {
-       hairline: 100,
+       'extra-light': 100,
-       thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
-       semibold: 600,
        bold: 700,
-       extrabold: 800,
+       'extra-bold': 800,
        black: 900,
      }
    }
  }

变体

默认情况下, 针对 font weight 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 fontWeight 属性来控制为 font weight 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       fontWeight: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 font weight 功能,您可以通过在配置文件的 corePlugins 部分将 fontWeight 属性设置为 false 来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontWeight: false,
    }
  }