有些字体和 CSS 可以工作，有些不行？？？ - Heroku React 应用程序答案

【问题标题】：SOME fonts and CSS work, SOME don't??? - Heroku React app有些字体和 CSS 可以工作，有些不行？？？ - Heroku React 应用程序
【发布时间】：2020-01-02 20:06:49
【问题描述】：

我网站上使用 https://explore-welly.herokuapp.com/ 的 create-react-app 制作的某些样式不适用于其他设备。例如，主页应该看起来像这样，它在本地和我在网站上工作的笔记本电脑上的 Heroku 上都有正确的 CSS 样式。

但是，当我在其他设备上打开它时，例如。我的 iPhone 6 在 Safari 上，它看起来很糟糕。像这样：

哎呀。我也在另一台笔记本电脑上的Safari上打开它，字体进来了，但就像上面的太阳图标和温度不合适。

我将 App.css 文件导入到每个 React 组件中。奇怪的是，一些样式来自 App.css，例如。 “商店”页面中每个商店的方框阴影。那么到底为什么一个简单的边距不适用于天气部分呢？

我将 Bootstrap 和 Reactstrap 与我的自定义样式结合使用。我还用 !important 做了大量的引导程序覆盖。我开始争论这是否是 Heroku 的问题。

这是天气的 HTML 和 CSS：

<div className="weather-panel bg-transparent border-0 text-center" onClick={this.toggle}>
          <img className="weather-icon" src={require(`../../images/weather-icons/${this.props.weather.weatherIcon}.png`)} />
          <div className="weather-info text-white text-left">
            <h2>{this.props.weather.airvisualInfo.current.weather.tp}°C</h2>
          </div>
        </div>

.weather-panel {
  width: 140px;
  margin: 10px auto;
}

.weather-panel:hover {
  cursor: pointer;
}

.weather-icon {
  width: 70px;
  float: left;
}

.weather-info {
  margin-top: 10px;
  float: right;
}

.weather-info h2 {
  margin-bottom: 2px;
}

.weather-info h5 {
  font-size: 10px;
  margin-bottom: 0;
  text-align: center;
}

.weather-description {
  text-align: center;
}

这是我的 index.html 文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:800i&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>Welly</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

这是我的参考代码：https://github.com/rlyhan/Welly-Site

注意：App.css 文件位于 client/src。天气信息在 client/src/components/modals 下。

【问题讨论】：

标签： css reactjs heroku

【解决方案1】：

所以我修复了字体问题。我使用的是来自 Google Fonts 的 Fira Sans 字体，它是 woff2 格式的。这显然不适用于 Safari。所以我不得不下载字体，它是一个 .zip 的 TFF 文件。然后我将 TFF 文件放在字体文件夹中，并将其包含在我的 CSS 中，如下所示：

@font-face {
  font-family: 'Fira Sans';
  src: url('./fonts/FiraSans-ExtraBoldItalic.ttf') format('truetype'); 
}

至于天气的 CSS...事实证明 iPhone 6 的开发工具显示与 iPhone 6 上显示的实际结果不匹配。所以我不得不对 CSS 进行一些调整让它工作。特别是我为那个天气部分添加了这个媒体查询：

@media only screen and (max-width: 235px) {

  .weather-icon {
    float: none !important;
  }

  .weather-info {
    float: none !important;
  }

}

【讨论】：