3

把我的头发拉在这里。

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

任何帮助将不胜感激

谢谢

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

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

4

2 回答 2

1

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

您的代码：

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

您告诉这是您的代码，但在已部署的版本中，它说font-family: "Roboto"只需修复此问题，它可能会起作用或遵循以下说明

于 2020-11-10T12:18:22.903 回答
0

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

尝试下载字体字体而不是导入可能会起作用的字体（下面第 3 点中提到的过程）。您应该检查的其他一些事情是在这个 SO 问题中：来自 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 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
 }
  • 从谷歌字体下载字体后，不要忘记将 .woff 文件移动到项目目录，否则它将无法工作
  • 我在 app.lambdatest.com 上对其进行了测试，它运行良好，结果的屏幕截图在这里：

在此处输入图像描述

于 2020-11-10T13:24:54.677 回答