排版 (Typography)

主题提供了一组协同工作的字体大小，并且也与布局网格配合良好。

字体族系

您可以使用 theme.typography.fontFamily 属性更改字体族系。

例如，此示例使用系统字体而不是默认的 Roboto 字体

const theme = createTheme({
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

自托管字体

要自托管字体，请下载 ttf、woff 和/或 woff2 格式的字体文件，并将它们导入到您的代码中。

import RalewayWoff2 from './fonts/Raleway-Regular.woff2';

接下来，您需要更改主题以使用这种新字体。为了全局定义 Raleway 作为字体，可以使用 CssBaseline 组件（或您选择的任何其他 CSS 解决方案）。

import RalewayWoff2 from './fonts/Raleway-Regular.woff2';

const theme = createTheme({
  typography: {
    fontFamily: 'Raleway, Arial',
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'Raleway';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: local('Raleway'), local('Raleway-Regular'), url(${RalewayWoff2}) format('woff2');
          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
        }
      `,
    },
  },
});

// ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Box sx={{ fontFamily: 'Raleway' }}>Raleway</Box>
  </ThemeProvider>
);

请注意，如果您想添加额外的 @font-face 声明，您需要使用字符串 CSS 模板语法来添加样式覆盖，以便先前定义的 @font-face 声明不会被替换。

Material UI 对字体大小使用 rem 单位。浏览器 <html> 元素的默认字体大小为 16px，但浏览器可以选择更改此值，因此 rem 单位允许我们适应用户的设置，从而提供更好的辅助功能支持。用户出于各种原因更改字体大小设置，从视力不佳到为尺寸和观看距离可能大相径庭的设备选择最佳设置。

要更改 Material UI 的字体大小，您可以提供 fontSize 属性。默认值为 14px。

const theme = createTheme({
  typography: {
    // In Chinese and Japanese the characters are usually larger,
    // so a smaller fontsize may be appropriate.
    fontSize: 12,
  },
});

浏览器计算出的字体大小遵循以下数学方程式

响应式字体大小

theme.typography.* 变体属性直接映射到生成的 CSS。您可以在其中使用媒体查询

const theme = createTheme();

theme.typography.h3 = {
  fontSize: '1.2rem',
  '@media (min-width:600px)': {
    fontSize: '1.5rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '2.4rem',
  },
};

响应式 h3

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
</ThemeProvider>

按 Enter 开始编辑

为了自动化此设置，您可以使用 responsiveFontSizes() 辅助函数使主题中的排版字体大小具有响应性。

您可以在下面的示例中看到这一点。调整浏览器窗口大小，并注意字体大小如何在宽度跨越不同的断点时发生变化

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

响应式 h3

响应式 h4

响应式 h5

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
  <Typography variant="h4">Responsive h4</Typography>
  <Typography variant="h5">Responsive h5</Typography>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography variant="h3">Responsive h3</Typography>
  <Typography variant="h4">Responsive h4</Typography>
  <Typography variant="h5">Responsive h5</Typography>
</ThemeProvider>

按 Enter 开始编辑

流体字体大小

待完成：#15251。

HTML 字体大小

您可能想要更改 <html> 元素的默认字体大小。例如，当使用 10px 简化时。

提供了 theme.typography.htmlFontSize 属性用于此用例，它告诉 Material UI <html> 元素上的字体大小是多少。这用于调整 rem 值，以便计算出的字体大小始终与规范匹配。

const theme = createTheme({
  typography: {
    // Tell Material UI what the font-size on the html element is.
    htmlFontSize: 10,
  },
});

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */
}

您需要在本页面的 HTML 元素上应用上述 CSS 才能看到以下演示正确呈现。

body1

<ThemeProvider theme={theme}>
  <Typography>body1</Typography>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography>body1</Typography>
</ThemeProvider>

按 Enter 开始编辑

变体

排版对象默认带有 13 种变体

h1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
button
caption
overline

这些变体中的每一个都可以单独自定义

const theme = createTheme({
  typography: {
    subtitle1: {
      fontSize: 12,
    },
    body1: {
      fontWeight: 500,
    },
    button: {
      fontStyle: 'italic',
    },
  },
});

subtitle

body1

<ThemeProvider theme={theme}>
  <Typography variant="subtitle1">subtitle</Typography>
  <Typography>body1</Typography>
  <Button>Button</Button>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <Typography variant="subtitle1">subtitle</Typography>
  <Typography>body1</Typography>
  <Button>Button</Button>
</ThemeProvider>

按 Enter 开始编辑

添加和禁用变体

除了使用默认的排版变体外，您还可以添加自定义变体，或禁用任何您不需要的变体。以下是您需要做的

步骤 1. 更新主题的排版对象

下面的代码片段向主题添加了一个名为 poster 的自定义变体，并删除了默认的 h3 变体

const theme = createTheme({
  typography: {
    poster: {
      fontSize: '4rem',
      color: 'red',
    },
    // Disable h3 variant
    h3: undefined,
  },
});

步骤 2. （可选）为您的新变体设置默认语义元素

此时，您已经可以使用新的 poster 变体，它默认将渲染一个带有您的自定义样式的 <span>。有时您可能希望出于语义目的默认使用不同的 HTML 元素，或者为了样式目的将内联 <span> 替换为块级元素。

为此，请在主题级别全局更新 Typography 组件的 variantMapping 属性

const theme = createTheme({
  typography: {
    poster: {
      fontSize: 64,
      color: 'red',
    },
    // Disable h3 variant
    h3: undefined,
  },
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          // Map the new variant to render a <h1> by default
          poster: 'h1',
        },
      },
    },
  },
});

步骤 3. 更新必要的类型定义（如果您正在使用 TypeScript）

您需要确保主题的 typography 变体和 Typography 的 variant 属性的类型定义反映了新的变体集。

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme()`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

步骤 4. 您现在可以使用新的变体了

poster

h3

<Typography variant="poster">poster</Typography>;

/* This variant is no longer supported. If you are using TypeScript it will give an error */
<Typography variant="h3">h3</Typography>;

默认值

您可以使用主题浏览器或通过打开此页面上的开发者工具控制台 (window.theme.typography) 来探索排版的默认值。