Materia UI 主题上设置的字体系列不适用于 Chrome 以外的浏览器

Question

需要使用特定字体覆盖某些元素，这在 Chrome 上运行良好，但在任何其他浏览器（Safari、FireFox 等）上则不然。有什么遗漏的吗？

这是我的代码：

const theme = createMuiTheme({

        MuiTypography: {

            h1: {

                fontFamily: 'Source Sans Pro'

            }

        }

    }

});

const MyApp = () => {

    return (

        <ThemeProvider theme={theme}>

            <CssBaseline />

            <Typography variant='h1'>Source Sans Pro font applied on Chrome, but not on other browsers</Typography>

        </ThemeProvider?

    )

}

Answer 1

事实证明，我使用的这种字体和其他字体似乎可以在 Chrome 上开箱即用，但在其他浏览器上则不然。所以基本上，必须完成整个舞蹈才能将它们添加到我的项目中，在我的例子中是通过webpack。基本上：在项目中安装font-awesomenpm install -S font-awesome在项目根目录中创建 style.scss 文件在新创建的style.scss文件中导入 font-awesome：@import '~font-awesome/css/font-awesome.css';在https://fonts.google.com/上查找我的字体选择样式，生成导入它们的链接，然后从新创建的样式中执行此操作style.scss@import '~font-awesome/css/font-awesome.css';@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,300;1,400;1,600&display=swap');从我的项目入口点导入style.scss文件（在我的例子中index.js，但也可以是app.js.import './style.scss'; // hereimport React from 'react';...ReactDOM.render(&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; .... My App...&nbsp; &nbsp; </div>&nbsp; &nbsp; , document.querySelector('#app'));最后还需要重建，因为我使用的是 webpack