在 Netlify 上部署后，Roboto 字体在 Safari 或移动浏览器中不起作用

Question

在这里拔头发。

我是 React 的新手，我的 css 字体系列是这样的。在 localhost 上一切正常，但是当我部署时，Roboto 字体在 safari 或移动浏览器上不起作用...

任何帮助将不胜感激

谢谢

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif !important;
  border: none;
}

我也在使用样式组件，我不太确定这是否与它有任何关系。

Answer 1

编辑：你不必做任何事情，只是你的css规则在生产构建中是错误的

您的代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif !important;
  border: none;
}

你告诉过这是你的代码，但在部署的版本中它说 font-family: "Roboto" 只需修复它，它可能会工作或按照下面的说明进行操作

Answer 2

如果上述解决方案不起作用：

尝试下载字体而不是导入字体，这可能有效（下面第 3 点中提到的过程）。您应该检查的其他一些事情在这个 SO 问题中：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 上测试过，效果很好，屏幕截图结果在这里：

在 Netlify 上部署后，Roboto 字体在 Safari 或移动浏览器中不起作用

Roboto font not working in Safari or Mobile browsers after deployment on Netlify

html

css

reactjs

roboto

netlify