我正在开发一个基于 Material-UI 的项目,并尝试添加一些自托管字体,因为它们不能作为谷歌字体使用。我遵循了 Material-UI 和 JSS 文档,并提出了以下内容,但我找不到它仍然不起作用的原因。也没有任何错误可以让我知道出了什么问题。
import { createMuiTheme } from "@material-ui/core/styles";
import Windlass from "./fonts/Windlass.eot";
import Windlass2 from "./fonts/Windlass.woff";
const theme = createMuiTheme({
...
typography: {
useNextVariants: true,
fontFamily: [
'Windlass',
'Helvetica Neue',
'Helvetica'
].join(','),
fontSize: 16,
fontWeightLight: 400,
fontWeightRegular: 400,
fontWeightMedium: 600,
fontWeightBold: 700},
overrides: {
MuiCssBaseline: {
'@global': {
'@font-face': {
fontFamily: 'Windlass',
src: `url(${Windlass})`,
fallbacks: [
{src: `url(${Windlass}?#iefix) format(embedded-opentype)`},
{src: `url(${Windlass2}) format(woff)`}
]
}
}
}
}
});
export default theme;
Run Code Online (Sandbox Code Playgroud)
当我检查元素时,字体名称似乎确实显示在 css 中
font-family: …Run Code Online (Sandbox Code Playgroud)