自定义字体未加载到 Material UI 的自定义主题上答案

【问题标题】：Custom font isn't loading on custom theme for Material UI自定义字体未加载到 Material UI 的自定义主题上
【发布时间】：2020-04-09 14:10:07
【问题描述】：

我在我的 React Web 应用程序中使用自定义字体。所以我写了这段代码：

import React, { FunctionComponent } from 'react'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
import SofiaProLightTtf from '../../assets/font/sofia-pro-light.ttf'
import SofiaProTtf from '../../assets/font/sofia-pro-regular.ttf'

const sofiaPro = {
  fontFamily: 'Sofia Pro',
  fontStyle: 'normal',
  fontWeight: 100,
  src: `url(${SofiaProTtf})`
}

const sofiaProLight = {
  fontFamily: 'Sofia Pro Light',
  fontStyle: 'normal',
  fontWeight: 100,
  src: `url(${SofiaProLightTtf})`
}

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Sofia Pro',
    body1: {
      fontFamily: 'Sofia Pro Light'
    }
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [sofiaPro, sofiaProLight]
      }
    }
  }
})

const Theme: FunctionComponent = ({ children }) => (
  <MuiThemeProvider theme={theme}>{ children }</MuiThemeProvider>
)

export default Theme

但它不起作用。所以我尝试使用纯 CSS 自定义字体。

我找到了一种解决方法，删除 createMuiTheme 中的 overrides 属性并使用以下 CSS：

<style>
  @font-face {
    font-family: 'Sofia Pro';
    font-style: normal;
    font-weight: 100;
    src: url("/65e0f064b96a52b92f7293b673054b0b.ttf");
  }

  @font-face {
    font-family: 'Sofia Pro Light';
    font-style: normal;
    font-weight: 100;
    src: url("/d15399628129cc8121c08073df25f0dd.ttf");
  }
</style>

但这是一个非常糟糕的解决方法...是否有更好的解决方案，专门针对使用 Material UI 的项目？我在createMuiTheme 上做错了吗？

【问题讨论】：

使用外部库的最佳方式是在angular.json 文件中使用它。在您的情况下，您可以在样式下导入字体。
我正在使用 React 而不是 Angular 进行开发。我会在问题上写它...
@TheWeeezel 我不知道你到底是什么意思......反正主要有三个步骤：[1]你应该设置文件加载器（github.com/macabeus/klo-gba.js/blob/…）[2]添加@类型文件中的 987654328@ [3] 现在您可以使用 import MyFontFile from '../../assets/font/my-font.ttf'
如果你愿意，你也可以设置.tff模块的类型：declare module '*.ttf' { const content: string; export default content }
但是为什么没有这样的答案。我现在明白了：D 谢谢！

标签： javascript css reactjs material-ui font-face

【解决方案1】：

您首先需要配置您的 webpack 以使用字体或使用链接或 cdn 到字体，在配置您的 webpack 以处理字体或使用 cdn 之后，您可以转到 theme.js 并添加您的字体以便您可以使用它在全球范围内

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

const raleway = {
  fontFamily: 'Raleway',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 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',
};

在你的主题中像这样使用 cssbaseline

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Raleway, Arial',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [raleway],
      },
    },
  },
});

我从文档中得到这个

https://material-ui.com/customization/typography/

【讨论】：

是的，我完全遵循了这一点，但它不起作用，就像你在我的代码中看到的那样......嗯......我认为这是一个错误。我正在 Material UI 的存储库上写一个问题