在 Netlify 上部署后，Roboto 字体无法在 Safari 或移动浏览器中工作

Question

在 Netlify 上部署后，Roboto 字体无法在 Safari 或移动浏览器中工作

rya*_*an. 5 html css reactjs roboto netlify

在这里拉我的头发。

我是 React 新手，我的 css 中有我的字体系列，如下所示。在本地主机上一切都很好，但是当我部署时，Roboto 字体在 safari 或移动浏览器上不起作用......

任何帮助将不胜感激

谢谢

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Gay*_*ali 1

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

尝试下载字体而不是导入字体，这可能有效（下面第三点中提到的过程）。您应该检查的其他一些事情在这个问题中：来自 Stack Overflow 的相关问题

您还应该包括 font-weight 和 font-style 属性（对某些有用）

它应该看起来像这样：

font-family: 'Roboto Sans', sans-serif;
font-weight:900;
font-style:italic;

Run Code Online (Sandbox Code Playgroud)

如果您像这样在 css 文件中导入字体 font：
```
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')
```
Run Code Online (Sandbox Code Playgroud) 然后更改它并将其导入到标记中的 html 文件中<head>，或者只需按照以下代码操作：
```
<head>
 <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" 
  rel="stylesheet">
</head>
```
Run Code Online (Sandbox Code Playgroud)

如果上述所有方法均失败，请从 google fonts 下载字体并在根 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
 }

Run Code Online (Sandbox Code Playgroud)

从谷歌字体下载字体后，不要忘记将 .woff 文件移动到项目目录，否则它将无法工作
我在 app.lambdatest.com 上测试了它，效果很好，结果的屏幕截图如下：

归档时间：	5 年，3 月前
查看次数：	3782 次
最近记录：	5 年，3 月前