跳转到内容
编辑此页面

Typography

使用文字铸排可以尽可能清晰、高效地展示您的设计和内容。

大量字阶和样式会影响任何布局的美观性。 版式比例是一组有限的类型大小, 与布局网格一起工作很好。

概述

Material-UI 不会自动加载 Roboto 字体。 你负责加载你的应用程序中使用的任何字体。 有这样几个简单的方法来加载 Roboto 字体。 For more advanced configuration, check out the theme customization section.

Roboto 字体 CDN

以下是一个简单 link markup，可以用于从 CDN 加载 Roboto 字体：

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

通过 npm 安装

You can install it by running one of the following commands in your terminal:

With npm:

npm install @fontsource/roboto

Or yarn:

yarn add @fontsource/roboto

Then, you can import it in your entry-point.

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

For more info check out Fontsource.

Fontsource can be configured to load specific subsets, weights and styles. MUI default typography configuration only relies on 300, 400, 500, and 700 font weights.

组件

The Typography component makes it easy to apply a default set of font weights and sizes in your application.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button textcaption textoverline text

主题

In some situations you might not be able to use the Typography component. Hopefully, you might be able to take advantage of the typography keys of the theme.

This div's text looks like that of a button.
<Div>{"This div's text looks like that of a button."}</Div>

改变语义元素

The Typography component uses the variantMapping prop to associate a UI variant with a semantic element. It's important to realize that the style of a typography component is independent from the semantic underlying element.

  • 使用 component 属性，您可以一次性改变底层元素的样式：
{
  /* 在此页面中已经有一个 h1 标签，我们不会再重复。 */
}
<Typography variant="h1" component="h2">
  h1. 标题
</Typography>; Heading
</Typography>;

const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h2',
          h2: 'h2',
          h3: 'h2',
          h4: 'h2',
          h5: 'h2',
          h6: 'h2',
          subtitle1: 'h2',
          subtitle2: 'h2',
          body1: 'span',
          body2: 'span',
        },
      },
    },
  },
});

添加 & 禁用变体

In addition to using the default typography variants, you can add custom ones, or disable any you don't need. See the Adding & disabling variants example for more info.

系统属性

As a CSS utility component, the Typography supports all system properties. You can use them as prop directly on the component. For instance, a margin-top:

<Typography mt={2}>

无障碍设计

A few key factors to follow for an accessible typography:

API