跳转到内容

Typography(文字铸排)

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

变体

subtitle2
body1
body2
<Box sx={{ typography: 'subtitle2' }}><Box sx={{ typography: 'subtitle2' }}>// theme.typography.subtitle2
<Box sx={{ typography: 'body1' }}><Box sx={{ typography: 'body2' }}><Box sx={{ typography: 'body2' }}><Box sx={{ typography: 'subtitle2' }}>// theme.typography.subtitle2
<Box sx={{ typography: 'body1' }}><Box sx={{ typography: 'body2' }}><Box sx={{ typography: 'body2' }}>

文本对齐(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 sx={{ textAlign: 'left' }}><Box sx={{ textAlign: 'left' }}><Box sx={{ textAlign: 'left' }}><Box sx={{ textAlign: 'center' }}><Box sx={{ textAlign: 'right' }}><Box sx={{ textAlign: 'right' }}><Box sx={{ textAlign: 'right' }}>

字体权重(Font weight)

capitalized text.
Lowercase Text.
Uppercase Text.
<Box sx={{ textTransform: 'capitalize' }}><Box sx={{ textTransform: 'lowercase' }}><Box sx={{ textTransform: 'uppercase' }}><Box sx={{ textTransform: 'lowercase' }}><Box sx={{ textTransform: 'uppercase' }}>

字体大小(Font size)

Light
Regular
Medium
500
Bold
<Box sx={{ fontWeight: 'light' }}><Box sx={{ fontWeight: 'light' }}>// theme.typography.fontWeightLight
<Box sx={{ fontWeight: 'regular' }}><Box sx={{ fontWeight: 'medium' }}><Box sx={{ fontWeight: 500 }}><Box sx={{ fontWeight: 'bold' }}><Box sx={{ fontWeight: 'medium' }}><Box sx={{ fontWeight: 500 }}><Box sx={{ fontWeight: 'bold' }}><Box sx={{ fontWeight: 'light' }}>// theme.typography.fontWeightLight
<Box sx={{ fontWeight: 'regular' }}><Box sx={{ fontWeight: 'medium' }}><Box sx={{ fontWeight: 500 }}><Box sx={{ fontWeight: 'bold' }}><Box sx={{ fontWeight: 'medium' }}><Box sx={{ fontWeight: 500 }}><Box sx={{ fontWeight: 'bold' }}>

字体

Default
h6.fontSize
16px
<Box sx={{ fontSize: 'default' }}><Box sx={{ fontSize: 'default' }}><Box sx={{ fontSize: 'default' }}>// theme.typography.fontSize
<Box sx={{ fontSize: 'h6.fontSize' }}><Box sx={{ fontSize: 16 }}><Box sx={{ fontSize: 16 }}><Box sx={{ fontSize: 16 }}>

Font style

Normal font style.
Italic font Style.
Oblique font style.
<Box sx={{ fontStyle: 'normal' }}><Box sx={{ fontStyle: 'italic' }}><Box sx={{ fontStyle: 'oblique' }}><Box sx={{ fontStyle: 'normal' }}><Box sx={{ fontStyle: 'italic' }}><Box sx={{ fontStyle: 'oblique' }}><Box sx={{ fontStyle: 'italic' }}><Box sx={{ fontStyle: 'oblique' }}><Box sx={{ fontStyle: 'oblique' }}>

Font family

Default
Monospace
<Box sx={{ fontFamily: 'default' }}><Box sx={{ fontFamily: 'default' }}><Box sx={{ fontFamily: 'default' }}><Box sx={{ fontFamily: 'Monospace' }}>

行高(Line Height)

Letter Spacing 6px.
Letter Spacing 10px.
<Box sx={{ letterSpacing: 6 }}><Box sx={{ letterSpacing: 6 }}><Box sx={{ letterSpacing: 10 }}><Box sx={{ letterSpacing: 6 }}><Box sx={{ letterSpacing: 10 }}>

Line height

Normal height.
line-height: 2
<Box sx={{ lineHeight: 'normal' }}><Box sx={{ lineHeight: 10 }}><Box sx={{ lineHeight: 'normal' }}><Box sx={{ lineHeight: 10 }}><Box sx={{ lineHeight: 10 }}>

API

import { typography } from '@material-ui/system';
导入名称 属性 CSS 属性 Theme key
typography typography font-family, font-weight, font-size, line-height, letter-spacing, text-transform typography
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
textTransform textTransform text-transform none