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字体上使用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" />

希望有帮助！

使用Material UI进行反应未找到自定义字体

1 个答案:

配置Material UI主题

更改字体加载方式