Typography 文字铸排

用于控制对齐（alignment），封装（wrapping），以及字体权重（weight）等等的常用文本实用辅助工具的文档和示例。

文本对齐（Text alignment）

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

Left aligned text.

Center aligned text.

Right aligned text.

<Box textAlign="left">…
<Box textAlign="center">…
<Box textAlign="right">…

字体权重（Font weight）

Light

Regular

Medium

500

Bold

<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={500}>…
<Box fontWeight="fontWeightBold">…

字体大小（Font size）

Default

h6.fontSize

16px

<Box fontSize="fontSize">…
<Box fontSize="h6.fontSize">…
<Box fontSize={16}>…

字体样式（Font Style）

Normal font style.

Italic font Style.

Oblique font style.

<Box fontStyle="normal">…
<Box fontStyle="italic">…
<Box fontStyle="oblique">…

字体系列（Font family）

Default

Monospace

<Box fontFamily="fontFamily">…
<Box fontFamily="Monospace">…

字符间距（Letter Spacing）

Letter Spacing 6px.

Letter Spacing 10px.

<Box letterSpacing={6}>…
<Box letterSpacing={10}>…

行高（Line Height）

Normal height.

line-height: 2

<Box lineHeight="normal">…
<Box lineHeight={10}>…

API

import { typography } from '@material-ui/system';

导入名称	属性	CSS 属性	Theme key
`fontFamily`	`fontFamily`	`font-family`	`typography`
`fontSize`	`fontSize`	`font-size`	`typography`
`fontStyle`	`fontStyle`	`font-style`	`typography`
`fontWeight`	`fontWeight`	`font-weight`	`typography`
`letterSpacing`	`letterSpacing`	`letter-spacing`	none
`lineHeight`	`lineHeight`	`line-height`	none
`textAlign`	`textAlign`	`text-align`	none