排版

主題提供了一組協調的字體尺寸，並且與版面格線完美搭配。

字體家族

您可以使用 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() 輔助程式，使主題中的 Typography 字體大小具有回應性。

您可以在下面的範例中看到實際效果。調整瀏覽器的視窗大小，並注意當寬度跨越不同的斷點時，字體大小如何變化

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）來探索排版的預設值。