reactjs - Material-UI 中添加的自托管字体不起作用？

Question

我正在研究基于 Material-UI 的项目并尝试添加一些自托管字体，因为它们不能作为 google 字体使用。我遵循了 Material-UI 和 JSS 文档，并提出了以下内容，但我找不到它仍然无法正常工作的原因。也没有错误可以让我知道出了什么问题。

import { createMuiTheme } from "@material-ui/core/styles";
import Windlass from "./fonts/Windlass.eot";
import Windlass2 from "./fonts/Windlass.woff";

const theme = createMuiTheme({
  ...
  typography: {
    useNextVariants: true,
    fontFamily: [
      'Windlass',
      'Helvetica Neue',
      'Helvetica'
    ].join(','),
    fontSize: 16,
    fontWeightLight: 400,
    fontWeightRegular: 400,
    fontWeightMedium: 600,
    fontWeightBold: 700},
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': {
          fontFamily: 'Windlass',
          src: `url(${Windlass})`,
          fallbacks: [
            {src: `url(${Windlass}?#iefix) format(embedded-opentype)`},
            {src: `url(${Windlass2}) format(woff)`}
          ]
          }
        }
      }
  }
});

export default theme;

当我检查元素时，字体名称似乎确实显示在 css 中

font-family: Windlass,Helvetica Neue,Helvetica;

但文本显示为 Helvetica Neue。

Answer 1

万一有人偶然发现这篇文章。
这是将字体添加到 Material UI 主题的另一种方法。我按照 MUI 网站上的步骤操作。
https://material-ui.com/customization/typography/

///myAwesomeFont.ts
import myAwesomeFontEot from '../assets/fonts/myAwesomeFont.eot';
import myAwesomeFontWoff from '../assets/fonts/myAwesomeFont.woff';
import myAwesomeFontWoff2 from '../assets/fonts/myAwesomeFont.woff2';


import myAwesomeFontBoldEot from '../assets/fonts/myAwesomeFont-Bold.eot';
import myAwesomeFontBoldWoff from '../assets/fonts/myAwesomeFont-Bold.woff';
import myAwesomeFontBoldWoff2 from '../assets/fonts/myAwesomeFont-Bold.woff2';


const myAwesomeFontRegular = {
  fontFamily: 'myAwesomeFont',
  fontStyle: 'normal',
  fontWeight: 400,
  src: `local('myAwesomeFont-Regular'), 
  url(${myAwesomeFontEot}),
  url(${myAwesomeFontWoff}) format('woff'),
  url(${myAwesomeFontWoff2}) format('woff2')`,
};

const myAwesomeFontBold = {
  fontFamily: 'myAwesomeFont',
  fontStyle: 'normal',
  fontWeight: 700,
  src: `local('myAwesomeFont-Bold'), 
  url(${myAwesomeFontEot}),
  url(${myAwesomeFontWoff}) format('woff'),
  url(${myAwesomeFontWoff2}) format('woff2')`,
};

export default [myAwesomeFontRegular, myAwesomeFontBold]

在您的主题提供程序文件中。

//default.theme.ts
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import myAwesomeFontArray from './myAwesomeFont';


const theme: Theme = createMuiTheme({
typography: {
    fontFamily: "myAwesomeFont, sans-serif",
    fontSize: 16
},
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [...myAwesomeFontArray],
      },
    },
  },
});

设置好之后。在浏览器上打开您的开发人员工具并验证它们确实正在下载。这对我有用。我希望这个对你有用。