为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

富国沪深 2023-08-24 21:05:53
需要使用特定字体覆盖某些元素,这在 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?    )}
查看完整描述

1 回答

?
拉风的咖菲猫

TA贡献1995条经验 获得超2个赞

事实证明,我使用的这种字体和其他字体似乎可以在 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/上查找我的字体

选择样式,生成导入它们的链接,然后从新创建的样式中执行此操作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


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 102 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信