字号 · Bootstrap 6.0 中文文档

类名	样式
.fs-xs	font-size: 0.75rem;
.fs-sm	font-size: 0.875rem;
.fs-md	font-size: 1rem;
.fs-lg	font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
.fs-xl	font-size: clamp(1.5rem, 1.1rem + 0.75vw, 1.75rem);
.fs-2xl	font-size: clamp(1.75rem, 1.3rem + 1vw, 2rem);
.fs-3xl	font-size: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
.fs-4xl	font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
.fs-5xl	font-size: clamp(3rem, 2rem + 5vw, 4rem);
.fs-6xl	font-size: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
.text-xs	font-size: 0.75rem; line-height: 1.25;
.text-sm	font-size: 0.875rem; line-height: 1.5;
.text-md	font-size: 1rem; line-height: 1.5;
.text-lg	font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); line-height: 1.5;
.text-xl	font-size: clamp(1.5rem, 1.1rem + 0.75vw, 1.75rem); line-height: 1.4285714286;
.text-2xl	font-size: clamp(1.75rem, 1.3rem + 1vw, 2rem); line-height: 1.3333333333;
.text-3xl	font-size: clamp(2rem, 1.5rem + 1.875vw, 2.5rem); line-height: 1.2;
.text-4xl	font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3rem); line-height: 1.1;
.text-5xl	font-size: clamp(3rem, 2rem + 5vw, 4rem); line-height: 1.1;
.text-6xl	font-size: clamp(3.75rem, 2.5rem + 6.25vw, 5rem); line-height: 1;

正在寻找标题类？请前往我们的标题文档。

<div class="fs-xs">.fs-xs text</div>
<div class="fs-sm">.fs-sm text</div>
<div class="fs-md">.fs-md text</div>
<div class="fs-lg">.fs-lg text</div>
<div class="fs-xl">.fs-xl text</div>
<div class="fs-2xl">.fs-2xl text</div>
<div class="fs-3xl">.fs-3xl text</div>
<div class="fs-4xl">.fs-4xl text</div>
<div class="fs-5xl">.fs-5xl text</div>
<div class="fs-6xl">.fs-6xl text</div>

包含 `line-height`

将.fs-*工具类与.text-*工具类交换，以同时应用font-size和line-height。这些是从单个 Sass map $font-sizes 配置的。

.text-xs 文本

.小号文字

.文本-md 文本

.text-lg 文本

.text-xl 文本

.text-2xl 文本

.text-3xl 文本

.text-4xl 文本

.text-5xl 文本

.text-6xl 文本

HTML

<div class="text-xs">.text-xs text</div>
<div class="text-sm">.text-sm text</div>
<div class="text-md">.text-md text</div>
<div class="text-lg">.text-lg text</div>
<div class="text-xl">.text-xl text</div>
<div class="text-2xl">.text-2xl text</div>
<div class="text-3xl">.text-3xl text</div>
<div class="text-4xl">.text-4xl text</div>
<div class="text-5xl">.text-5xl text</div>
<div class="text-6xl">.text-6xl text</div>

响应式 `font-size`

字体大小使用 CSS 的 clamp() 提供流体、响应的大小，根据视口宽度在最小值和最大值之间缩放。clamp() 函数接受三个参数：

最小值
首选值（使用视口单位计算）
以及，最大值

随着视口的变化，字体大小在最小值和最大值之间平滑过渡。以下是每个字体大小在不同视口宽度下的缩放方式。

尺寸	定义	最小值	最大值	@ 500px	@ 1400px
`xs`	`clamp(.75rem, .7rem + .25vw, .875rem)`	12px	14px	12.45px	14px
`sm`	`clamp(.875rem, .8rem + .375vw, 1rem)`	14px	16px	14.675px	16px
`md`	`clamp(1rem, .9rem + .5vw, 1.125rem)`	16px	18px	16.9px	18px
`lg`	`clamp(1.25rem, 1rem + .625vw, 1.5rem)`	20px	24px	20px	24px
`xl`	`clamp(1.5rem, 1.1rem + .75vw, 1.75rem)`	24px	28px	24px	28px
`2xl`	`clamp(1.75rem, 1.3rem + 1vw, 2.25rem)`	28px	36px	28px	34.8px
`3xl`	`clamp(2rem, 1.5rem + 1.875vw, 2.5rem)`	32px	40px	33.375px	40px
`4xl`	`clamp(2.25rem, 1.75rem + 2.5vw, 3rem)`	36px	48px	40.5px	48px
`5xl`	`clamp(3rem, 2rem + 5vw, 4rem)`	48px	64px	57px	64px
`6xl`	`clamp(3.75rem, 2.5rem + 6.25vw, 5rem)`	60px	80px	71.25px	80px

自定义你的可用 font-size通过修改 $font-sizes Sass map。

CSS

Sass map

字体大小及其相关的行高在$font-sizes中的scss/_config.scss映射中定义。CSS 自定义属性和工具类从此映射生成。

scss/_config.scss

$font-sizes: ();
// stylelint-disable-next-line scss/dollar-variable-default
$font-sizes: defaults(
  (
    "xs": (
      "font-size": .75rem,
      "line-height": 1.25
    ),
    "sm": (
      "font-size": .875rem,
      "line-height": 1.5
    ),
    "md": (
      "font-size": 1rem,
      "line-height": 1.5
    ),
    "lg": (
      "font-size": clamp(1.125rem, 1rem + .625vw, 1.25rem),
      "line-height": 1.5
    ),
    "xl": (
      "font-size": clamp(1.5rem, 1.1rem + .75vw, 1.75rem),
      "line-height": calc(2.5 / 1.75)
    ),
    "2xl": (
      "font-size": clamp(1.75rem, 1.3rem + 1vw, 2rem),
      "line-height": calc(3 / 2.25)
    ),
    "3xl": (
      "font-size": clamp(2rem, 1.5rem + 1.875vw, 2.5rem),
      "line-height": 1.2
    ),
    "4xl": (
      "font-size": clamp(2.25rem, 1.75rem + 2.5vw, 3rem),
      "line-height": 1.1
    ),
    "5xl": (
      "font-size": clamp(3rem, 2rem + 5vw, 4rem),
      "line-height": 1.1
    ),
    "6xl": (
      "font-size": clamp(3.75rem, 2.5rem + 6.25vw, 5rem),
      "line-height": 1
    ),
  ),
  $font-sizes
);

Sass 工具 API

字体大小工具在我们的工具 API 中的 scss/_utilities.scss 中声明。了解如何使用工具 API。

scss/_utilities.scss

"font-size": (
  property: font-size,
  class: fs,
  values: map-get-nested($font-sizes, "font-size")
),
"text-size": (
  property: (
    "font-size": 1rem,
    "line-height": 1.5
  ),
  class: text,
  values: $font-sizes
),

字号

字体大小

包含 line-height

响应式 font-size

CSS

Sass map

Sass 工具 API

包含 `line-height`

响应式 `font-size`