标签: reaction-commerce

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

我正在开发一个基于 Material-UI 的项目，并尝试添加一些自托管字体，因为它们不能作为谷歌字体使用。我遵循了 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;

Run Code Online (Sandbox Code Playgroud)

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