对 Material UI 做出反应，找不到自定义字体

Question

我的 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”。令人讨厌的是，此设置以前运行良好，但现在失败了。有人知道为什么这可能行不通吗？谢谢！

Answer 1

这是一个工作示例：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 字体上使用 Nunito Sans 的托管版本会更容易，所以我的 index.html 文件也有以下内容：

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

更改加载字体的方式

您提到您看到通过的文件请求，所以可能不是这个，但我想我还是会注意到它。

从您提供的示例 CSS 中，我觉得您从 Google 字体本身复制了 CSS 声明。当我现在访问 Nunito Sans 时，我得到了完全相同的结果：https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,50

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

Google 字体有其自动处理此问题的原因和逻辑，因此值得考虑一下它是否适合您。否则，如果您确实想在本地托管字体，直接从 Google Fonts API 下载它们将不如从具有您可能想要的所有格式的其他来源获取它们可靠（此时 WOFF 和 WOFF2 几乎总是足够的，并且您可以通过添加 WOFF 格式来支持an extra ~9% of browsers in use，无需额外的努力）。

例如，在下载 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 与 typefaces- packages on npm 一起使用，您可以安装您需要的格式和 CSS：

npm install typeface-nunito-sans

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

import "typeface-nunito-sans";

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

不过，我的第一个建议是从 Nunito Sans 的实时 Google 字体版本开始，并根据需要从那里更改您的方法：

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

希望有帮助！