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

编程问答 2022-06-03

问题描述

在这里拉我的头发。

我是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

  1. 您还应该包括font-weight和font-style属性（适用于某些情况）
  • 它应该看起来像这样： 
    font-family: 'Roboto Sans',sans-serif;
font-weight:900;
font-style:italic;
  1. 如果要像这样在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>
  2. 如果以上所有方法均失败，则从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上进行了测试，效果很好，并且屏幕截图 结果在这里：

enter image description here

htmlnetlifyreactjsreactjsreactjsreactjsroboto