排版

Watch a video tutorial

Typeset 块有助于记录整个项目中使用的字体。

¥The Typeset block helps document the fonts used throughout your project.

Screenshot of Typeset block

{/* Typography.mdx */}
 
import { Meta, Typeset } from '@storybook/blocks';
 
<Meta title="Typography" />
 
export const typography = {
  type: {
    primary: '"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
  },
  weight: {
    regular: '400',
    bold: '700',
    extrabold: '800',
    black: '900',
  },
  size: {
    s1: 12,
    s2: 14,
    s3: 16,
    m1: 20,
    m2: 24,
    m3: 28,
    l1: 32,
    l2: 40,
    l3: 48,
  },
};
 
export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 
# Typography
 
**Font:** Nunito Sans
 
**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
 
<Typeset
  fontSizes={[
    Number(typography.size.s1),
    Number(typography.size.s2),
    Number(typography.size.s3),
    Number(typography.size.m1),
    Number(typography.size.m2),
    Number(typography.size.m3),
    Number(typography.size.l1),
    Number(typography.size.l2),
    Number(typography.size.l3),
  ]}
  fontWeight={typography.weight.black}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

排版

¥Typeset

import { Typeset } from '@storybook/blocks';

Typeset 配置了以下属性：

¥Typeset is configured with the following props:

`fontFamily`

类型：string

¥Type: string

提供要显示的字体系列。

¥Provides a font family to be displayed.

`fontSizes`

类型：(string | number)[]

¥Type: (string | number)[]

提供可用字体大小列表（在 px 中）。

¥Provides a list of available font sizes (in px).

`fontWeight`

类型：number

¥Type: number

指定要显示的字体粗细。

¥Specifies the weight of the font to be displayed.

`sampleText`

类型：string

¥Type: string

设置要显示的文本。

¥Sets the text to be displayed.