如何解决在Netlify上部署后，Roboto字体在Safari或移动浏览器中不起作用
在这里拉我的头发。
我是React的新手，我的CSS中有这样的字体家族。在本地主机上一切都很好，但是当我部署时，Roboto字体在野生动物园或移动浏览器中不起作用...
任何帮助将不胜感激
谢谢
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Roboto,sans-serif !important;
border: none;
}
我也在使用样式化的组件，我不太确定这是否与它有关。
解决方法
编辑：您不必做任何事情，只是您的CSS规则在生产版本中是错误的
您的代码：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Roboto,sans-serif !important;
border: none;
}
您告诉我们这是您的代码，但在已部署的版本中，它说font-family: "Roboto"只需解决此问题，它可能会起作用或按照下面的说明进行操作
如果上述解决方案无效：
尝试下载字体而不是导入字体（这将在下面的第三点中提到），而不是导入字体。 您应该检查的其他一些问题是这样的问题：A related question from Stack Overflow
- 您还应该包括font-weight和font-style属性（适用于某些情况）
- 它应该看起来像这样：
font-family: 'Roboto Sans',sans-serif; font-weight:900; font-style:italic;
- 如果要像这样在css文件中导入字体，请执行以下操作：
然后将其更改并导入到@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')<head>标签的html文件中，或者 遵循代码：<head> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> </head> - 如果以上所有方法均失败，则从Google字体下载字体，然后在您的
根css文件
@font-face { font-family: 'Font_name'; font-style: normal; font-weight: normal; src: local('Font_name'),url('Font_name.woff') format('woff'); } *{ font-family: Font_name }
- 从Google字体下载字体后，不要忘记移动.woff 文件到项目目录，否则 不上班
- 我在app.lambdatest.com上进行了测试，效果很好，并且屏幕截图 结果在这里：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。