跳转到内容

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