使用自定义字体全局覆盖 Material UI 5.0 版式主题

Question

Material Ui 5.0我目前正在尝试使用两种个人字体。我想通过覆盖theme. 我的第一个问题是我什至无法正确加载字体，而且我typography根本无法更改字体。此外，使用 时MUI 5.0，我无法将此自定义字体应用于全身部分。因此，如果使用 <Typography variant='h4'>. or <Box>...</Box>我的自定义字体则不适用。我在版本 5 中进行全局覆盖的方式Mui 4.0不再起作用。我很恼火，因为它MUI 5.0 documentation没有正确或根本解释不了这一点，而且我已经坐在那里几个小时了。

我将不胜感激任何帮助 ！

我在用React, Typescript。

字体.d.ts

 declare module '*.woff'
 declare module '*.ttf'

CSSBaseLine.ts

import CustomOneMediumWoff from '../fonts/CustomOne-Medium.woff'
import CustomOneTwomWoff from '../fonts/CustomOne-Twom.woff'

    export const CssBaseline = {
        MuiCssBaseline: {
          
            // '@global': {
            //     html: {
            //       fontFamily: 'CustomOneTwomWoff',
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //     body: {
            //       fontFamily: 'CustomOneTwomWoff',
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //     '#root': {
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //   },
    
        // I did that in MUI 4.0 and it does not work anymore
      // Tho documentation is not explaining the global overwirte part anymore
    
        styleOverrides: `
        @font-face {
            font-family: "CustomOne";
            url(${CustomOneMediumWoff}) format("woff"),
            font-weight: 500;
            font-style: normal;
          }, 
    
          @font-face {
            font-family: "CustomTwo";
            url(${CustomTwoMediumWoff}) format("woff"),
            font-weight: 500;
            font-style: normal;
          }, 
    
      `,
      },
    }
    
    export default CssBaseline

typography.ts 字体不适用

export const typography = {
  fontFamily: ['CustomOne', 'CustomtTwo'].join(','),
  h1: {
    fontFamily: 'CustomOne',
    fontWeight: 500,
  },
  h2: {
    fontFamily: 'CustomOne',
  },
  h3: {
    fontFamily: 'CustomOne',
  },
  h4: {
    fontFamily: 'CustomOne',
  },
  button: {
    fontFamily: 'CustomtTwo',
  },
}

export default typography

主题.ts

export const theme = createTheme({
  palette:palette,
  typography: typography,
  components: {
    ...CssBaseline,
  },
})

export default theme

不起作用并加载默认浏览器字体

     <Typography variant='h4'>Test 4</Typography>
     <Box mt={4}>test Boxssssss H</Box>

应用程序.tsx

 <ThemeProvider theme={theme}>
      <CssBaseline />
....

Answer 1

我没有看到您问题中的代码有任何明显的问题，但这是一个有效的示例：

import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import InspirationTTF from "./Inspiration-Regular.ttf";

const theme = createTheme({
  typography: {
    fontFamily: "Inspiration"
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        "@font-face": {
          fontFamily: "Inspiration",
          src: `url(${InspirationTTF}) format("truetype")`
        },
        body: {
          fontSize: "3rem",
          color: "purple"
        }
      }
    }
  }
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Typography variant="h1">Hello World</Typography>
      <div>Some body text</div>
    </ThemeProvider>
  );
}

相关答案：how to apply global backgroundColor using MuiCssBaseline and styleOverrides