与 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;
}

问题是用户界面正在回退到“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 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 与typefaces-npm上的包一起使用，您可以通过这种方式安装所需的格式和 CSS：

npm install typeface-nunito-sans

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

npm install typeface-nunito-sans

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

import "typeface-nunito-sans";

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

希望有帮助！