在 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-awesome

npm install -S font-awesome

在项目的根目录中创建一个 style.scss 文件
在新建的style.scss文件中导入font-awesome:

@import '~font-awesome/css/font-awesome.css';

在 https://fonts.google.com/
Select 样式，生成 link 以从新创建的 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'; // here
import React from 'react';
...

ReactDOM.render(
    <div>
        .... My App...
    </div>
    , document.querySelector('#app')
);

最后还需要重建，因为我使用的是 webpack

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

Font family set on Materia UI theme not working on browsers other than Chrome

javascript

css

fonts

material-design

material-ui