在材质ui中加载自定义字体Open Sans及其变体粗体，半粗体

问题描述

我将Material UI与Create React App配合使用，并尝试包含以ttf格式下载的“ Open Sans”字体。遵循Material UI上自托管字体的文档之后，我当前的theme.js文件如下所示：

import OpenSansRegular from "./fonts/OpenSans-Regular.ttf";
import OpenSansBold from "./fonts/OpenSans-Bold.ttf";
import OpenSansSemiBold from "./fonts/OpenSans-SemiBold.ttf";
import { createMuiTheme } from "@material-ui/core/styles";

const openSansRegular = {
  fontFamily: "Open Sans",fontStyle: "normal",fontdisplay: "swap",src: `
    local("Open Sans"),local("OpenSans-Regular")
    url(${OpenSansRegular}) format("ttf")
  `,};

const openSansSemibold = {
  fontFamily: "Open Sans",local("OpenSans-SemiBold")
    url(${OpenSansSemiBold}) format("ttf")
  `,};

const openSansBold = {
  fontFamily: "Open Sans",local("OpenSans-Bold")
    url(${OpenSansBold}) format("ttf")
  `,};

const theme = createMuiTheme({
  typography: {
    fontFamily: "Open Sans",fontSize: 14,h1: {
      fontSize: 20,fontWeight: "bold",},h2: {
      fontSize: 18,h3: {
      fontSize: 16,overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [openSansRegular]
      }
    }
  },});

export default theme;

我无法弄清楚如何实际使用其变体，例如openSansSemiBold和openSansBold。我在主题中到底指定了什么位置以便被识别？并说我希望文本在应用程序的某些部分中以半粗体显示，我将如何精确地引用它？ 到目前为止，我还没有找到明确的答案。

解决方法

您可以将所有字体放入数组中。

   var customFontFamily = [openSansRegular,openSansSemibold,openSansBold];
   var customTypo = {
     ...
     body1 :{
          fontFamily: 'OpenSans-Regular',},h1:{
          fontFamily: 'OpenSans-SemiBold',h2:{
          fontFamily: 'OpenSans-Bold',...
  };
  const theme = createMuiTheme({
  typography: customTypo 
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [customFontFamily]
      }
    }
  },});