时间戳

首页 > 解决方案 > 如何在 React/TypeScript 中正确使用谷歌字体作为材料 ui 自定义主题排版？

css - 如何在 React/TypeScript 中正确使用谷歌字体作为材料 ui 自定义主题排版？

问题描述

您好我正在尝试在自定义 Material UI 主题中使用 Google 字体作为全局字体，但字体粗细不起作用。它只显示正常的字体粗细大小，即 400。当我导入另一个字体文件（如 Roboto-bold.woff2）的粗体时，为粗体字体正确编写代码，然后它就像粗体一样工作，只有中等字体粗细不会在这里工作。这是我的代码。

import { createMuiTheme } from '@material-ui/core';
import RobotoReg from '../font/Roboto-Regular.woff2';
import RobotoMed from '../font/Roboto-Medium.woff2';

const robotoReg: any = {
  fontFamily: 'Roboto',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Roboto-Regular'),
    url(${RobotoReg}) format('woff2')
  `,
};

const robotoMed: any = {
  fontFamily: 'Roboto',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Roboto-Medium'),
    url(${RoboroMed}) format('woff2')
  `,
};

const theme = createMuiTheme({
  typography: {
    fontFamily: ['Roboto', 'sans-serif',].join(','),
    htmlFontSize: 16,
    fontSize: 16,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
 },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [robotoReg, robotoMed],
      },
    },
  },
});

...

google 字体作为全局字体效果很好，但 font-weight: 500; 不起作用。有没有人有同样的问题？如果我能得到你的帮助，我将不胜感激！提前致谢。

标签： cssreactjstypescriptwebpackmaterial-ui

解决方案

现在可能为时已晚，但值得一提的是：您的代码中有错字：RoboroMed应该是RobotoMed.

推荐阅读