无法弄清楚为什么我的徽标的字体不起作用答案

【问题标题】：Can't figure out why the font for my logo isn't working无法弄清楚为什么我的徽标的字体不起作用
【发布时间】：2018-01-15 00:26:27
【问题描述】：

我想弄清楚为什么我的徽标字体没有为其他人下载。该字体称为 Aerokids。

我的 CSS 中的代码适用于我网站上的其他字体类型。只是徽标不起作用，即使它以相同的方式完成。有谁知道可能出了什么问题？这是我网站子文件夹中字体的屏幕截图：

这是我正在开发的网站的GitHub URL。

@font-face {
  font-family: 'Aerokids';
  src: url('fonts/Aerokids.otf');
  font-weight: normal;
  font-style: normal;

  font-family: 'odudo-semibold';
  src: url('../fonts/odudo-semi-bold.eot');
  src: url('../fonts/odudo-semi-bold.eot?#iefix') format('embedded-
  opentype'),
  url('../fonts/odudo-semi-bold.woff2') format('woff2'),
  url('../fonts/odudo-semi-bold.woff') format('woff'),
  url('../fonts/odudo-semi-bold.ttf') format('truetype'),
  url('../fonts/odudo-semi-bold.svg#youworkforthem') format('svg');
  font-weight: normal;
  font-style: normal;
}

.logo {
    font-family: 'Aerokids';
    font-weight: normal;
    color: #00E8FF;
    font-size: 2.5em;
    float: left;
    width: 30%;
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    margin: 0 auto;
}

【问题讨论】：

Aerokids.otf 在托管站点上为我抛出 404。

标签： html css fonts font-face webfonts

【解决方案1】：

您需要将两个@font-face 规则分开。

@font-face {
  font-family: 'Aerokids';
  src: url('fonts/Aerokids.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'odudo-semibold';
  src: url('../fonts/odudo-semi-bold.eot');
  src: url('../fonts/odudo-semi-bold.eot?#iefix') format('embedded-
  opentype'),
  url('../fonts/odudo-semi-bold.woff2') format('woff2'),
  url('../fonts/odudo-semi-bold.woff') format('woff'),
  url('../fonts/odudo-semi-bold.ttf') format('truetype'),
  url('../fonts/odudo-semi-bold.svg#youworkforthem') format('svg');
  font-weight: normal;
  font-style: normal;
}

【讨论】：