跳转到内容

🎉 Material UI v5 is out now! Check out the announcement blog post →

编辑此页面

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';

有关更多信息请查看 Fontsource。

⚠️使用这种方法时要格外小心。 确保您的包不会一次性加载所有字体的变体 (100/300/400/500/700/900，italic/regular，SVG/woff)。 您可以将 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 className={classes.root}>{"This div's text looks like that of a button."}</div>

改变语义元素

文字铸排组件通过 variantMapping 属性关联了一种 UI 变体和某一种语义元素。 请注意，文字的样式是和最底层的语义元素分开的。

  • 使用 component 属性，您可以一次性改变底层元素的样式：
{/* 在此页面中已经有一个 h1 标签，我们不会再重复。 */}
<Typography variant="h1" component="h2">
  h1. 标题
</Typography>
const theme = createTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h1: 'h2',
        h2: 'h2',
        h3: 'h2',
        h4: 'h2',
        h5: 'h2',
        h6: 'h2',
        subtitle1: 'h2',
        subtitle2: 'h2',
        body1: 'span',
        body2: 'span',
      },
    },
  },
});

无障碍设计

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

API