跳转到内容
编辑此页面

Typography 文字铸排

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

大量字阶和样式会影响任何布局的美观性。 一个带有限量字阶的文字铸排比例（typographic scale）能够和排版网格搭配工作。

概述

Material-UI 不会自动加载 Roboto 字体。 你负责加载你的应用程序中使用的任何字体。 有这样几个简单的方法来加载 Roboto 字体。 若想查询更高级的配置，请参阅主题定制部分。

Roboto 字体 CDN

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

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

通过 npm 安装

通过在终端键入以下命令，你可以这样 安装字体：

npm install @fontsource/roboto

然后，你可以在开始文件中导入：

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

有关更多信息请查看 Fontsource。

您可以将 Fontsource 配置为加载特定的子集（subsets）、字体粗细（weights）和样式（styles）。 Material-UI 默认的排版配置仅依赖于 300，400，500 和 700 的字体权重。

组件

文字铸排组件使其能够轻松地在你的应用程序中应用一组默认的字体权重和大小。

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

主题

某些情况下，您可能无法使用 Typography 组件。 希望您可以利用 theme 里 typography 的一些值。

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

改变语义元素

文字铸排组件通过 variantMapping 属性关联了一种 UI 变体和某一种语义元素。 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>;

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',
        },
      },
    },
  },
});

Adding & disabling variants

In addition to using the default typography variants, you can add custom ones, or disable any you don't need. 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.

无障碍设计

考虑到文字铸排的无障碍设计，需要遵循以下几个关键点：

API