| 类名 | 样式 |
|---|---|
| .fw-lighter | font-weight: lighter; |
| .fw-light | font-weight: 300; |
| .fw-normal | font-weight: 400; |
| .fw-medium | font-weight: 500; |
| .fw-semibold | font-weight: 600; |
| .fw-bold | font-weight: 700; |
| .fw-bolder | font-weight: bolder; |
字体粗细
使用这些工具可以快速更改文本的font-weight。font-weight工具的缩写是.fw-*。
加粗文本。
更粗的字体（相对于父元素）。
半粗体文字。
中等重量的文本。
正常重量的文字。
轻量文本。
较轻的文本（相对于父元素）。
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>CSS
Sass map
字体粗细在 $font-weights 的 scss/_config.scss 映射中定义。CSS 自定义属性（--font-weight-*）由 scss/_root.scss 中的此映射生成，同一个映射为下面的 Sass 工具 API 提供支持。
$font-weights: ();
// stylelint-disable-next-line scss/dollar-variable-default
$font-weights: defaults(
(
lighter: lighter,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
bolder: bolder
),
$font-weights
);
Sass 工具 API
字体粗细工具在我们的工具 API 中的 scss/_utilities.scss 声明。了解如何使用工具 API。
"font-weight": (
property: font-weight,
class: fw,
values: $font-weights
),