React与Material UI无法找到自定义字体。

Question

React与Material UI无法找到自定义字体。

8

我有一个mui主题，定义如下：

export default createMuiTheme({
  typography: {
    fontFamily: '"Nunito Sans", "Helvetica", "Arial", sans-serif',
    fontWeightLight: 300,
    fontWeightMedium: 600,
    fontWeightRegular: 400
    }
  }
});

我已经使用 App.css 文件从本地文件中加载字体。从网络请求中可以看到这些文件是可以找到的。

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), 
  url(../assets/font/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
  unicode-range: 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, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(../assets/font/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
  unicode-range: 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, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Nunito Sans SemiBold'), local('NunitoSans-SemiBold'), 
  url(../assets/font/pe03MImSLYBIv1o4X1M8cc9iB85tU1E.woff2) format('woff2');
  unicode-range: 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, U+FFFD;
}

问题在于UI正在回滚到“Helvetica”字体。我无法看出为什么MUI没有使用“Nunito Sans”，很烦人的是这个设置之前是好的现在却失败了。是否有人知道为什么会出现这种情况？谢谢！

- Mike Miller

你尝试使用“useNextVariants: true”（迁移到新的字体变体）了吗？请参阅https://material-ui.com/style/typography/#strategies - Ricovitch

你能在 CodeSandbox 中重现这个问题吗？由于无法访问字体资源，因此很难尝试重现和解决问题。 - Ryan Cogswell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kennethormandy · Accepted Answer

这里有一个可行的例子：https://codesandbox.io/s/mzlmxpw4r8?fontsize=14 我认为你可能会遇到两个问题。

配置Material UI主题。

// Import the wrapper component, and the the creator function
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

// Create a new theme using Nunito Sans
const theme = createMuiTheme({
  typography: {
    fontFamily: "Nunito Sans, Roboto, sans-serif"
  }
});

const App = function(props) {
  // Pass the theme as a prop to the theme provider
  return (
    <MuiThemeProvider theme={theme}>
      <Demo />
    </MuiThemeProvider>
  );
};

为了方便演示，我决定使用Google Fonts上托管的Nunito Sans版本，因此我的index.html文件中也包含以下内容：

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500"
/>

改变字体加载方式

你提到了看到文件请求已经发送，所以可能不是这个问题，但我还是想提一下。

从你提供的CSS示例中可以看出，似乎你复制了Google Fonts本身的CSS声明。现在访问Nunito Sans时，我得到的结果与你提供的示例完全相同：https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,50

然而，这取决于请求CSS的浏览器。例如，如果您使用的浏览器支持WOFF但不支持WOFF2，则会提供WOFF文件。

Google Fonts有自己的原因和逻辑来自动处理这个问题，因此值得考虑是否是一个好的选择。否则，如果您确实想要将字体托管到本地，则直接从Google Fonts API下载字体将比从其他源获取字体格式更可靠（目前WOFF和WOFF2几乎总是足够的，并且您可以通过添加WOFF格式来支持约9％的正在使用的浏览器，而几乎不需要额外的工作）。

例如，在下载WOFF之后：

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src:
    url('../assets/font/NunitoSans-400.woff2') format('woff2'),
    url('../assets/font/NunitoSans-400.woff') format('woff');
}

或者，因为Material UI与npm上的typefaces-包配合使用，您可以通过这种方式安装所需的格式和CSS：

npm install typeface-nunito-sans

然后在您的 JavaScript 文件的顶部：

import "typeface-nunito-sans";

// Or require('typeface-nunito-sans') if you aren’t using import

不过，我首先建议您从实时的Google字体版本Nunito Sans开始，如有必要再进行调整：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500" />

希望这有所帮助！