Font Family 字体类型

控制元素字体类型的实用工具。

Class	Properties

基本用法

设置字体类型

您可以使用字体系列实用程序来控制文本的字体类型。

font-sans

The quick brown fox jumps over the lazy dog.

font-serif

The quick brown fox jumps over the lazy dog.

font-mono

The quick brown fox jumps over the lazy dog.

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-serif ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:font-serif 仅在悬停时应用 font-serif 实用程序。

<p class="font-sans hover:font-serif">
  <!-- ... -->
</p>

有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:font-serif 仅在中等屏幕尺寸及以上应用 font-serif 实用程序。

<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。

使用自定义值

定制您的主题

默认情况下，Tailwind 提供了三种字体系列工具：跨浏览器无衬线字体堆栈、跨浏览器衬线字体堆栈和跨浏览器等宽字体堆栈。您可以通过编辑 Tailwind 配置文件的 theme.fontFamily 部分来更改、添加或删除这些内容。

tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],		
      'serif': ['ui-serif', 'Georgia', ...],			
      'mono': ['ui-monospace', 'SFMono-Regular', ...],	
      'display': ['Oswald', ...],						
      'body': ['"Open Sans"', ...],						
    }
  }
}

字体系列可以指定为数组或简单的逗号分隔字符串：

{
  // Array format:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // Comma-delimited format:
  'sans': 'Helvetica, Arial, sans-serif',
}

请注意，Tailwind 不会自动为您转义字体名称。如果您使用的字体包含无效标识符，请将其用引号括起来或转义无效字符。

{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}

有关自定义默认主题的更多信息，请参阅主题自定义文档。

提供默认字体设置

您可以选择为项目中的每种字体提供默认的字体特性设置和字体变体设置，使用形式为 [fontFamilies, { fontFeatureSettings, fontVariationSettings }] 的元组，当配置自定义字体时。

tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        '"Inter var", sans-serif',
        {											
          fontFeatureSettings: '"cv11", "ss01"',	
          fontVariationSettings: '"opsz" 32'
        },											
      ],
    },
  },
}

任意值

如果您需要使用一个与主题无关的 font-family 值，可以使用方括号来根据任意值动态生成属性。

<p class="font-['Open_Sans']">
  <!-- ... -->
</p>

有关任意值支持的更多信息，请参阅任意值文档。

自定义默认字体

为了方便起见，Preflight 将 html 元素上的字体系列设置为与您配置的 sans 字体相匹配，因此更改项目的默认字体的一种方法是自定义 fontFamily 配置中的 sans 键：

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],	
      },
    }
  }
}

您还可以通过添加自定义基本样式来设置项目中使用的默认字体，从而自定义 font-family 属性

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: "Proxima Nova", system-ui, sans-serif;
  }
}

如果您已经定制了字体类型实用程序的不同名称，并且不希望在项目中有 font-sans 实用程序可用，这是最佳方法。