无法使用 Bebas Neue 自定义字体答案

【问题标题】：Can't get the Bebas Neue Custom Font to work无法使用 Bebas Neue 自定义字体
【发布时间】：2017-05-31 10:46:13
【问题描述】：

我正在尝试让 Bebas Neue 字体工作，我已经设法将我的字体转换为它们各自的类型，但是每当我在浏览器中加载字体时都会出错。

萤火虫抛出：

可下载字体：下载失败

Chrome 抛出 404 未找到。

我最初将这些字体放在他们自己的字体文件夹中，但后来我决定将字体移动到与我用来尝试排除位置问题的样式表相同的目录。

这个特定的文件是一个名为 _typography 的 SASS 部分文件，它位于一个名为 global 的文件夹中，这是我直接将所有字体原样放入的文件夹。

@font-face {
    font-family: 'BebasNeueRegular';
    src: url(BebasNeueRegular.eot);
    src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
         url(BebasNeueRegular.woff) format('woff'),
         url(BebasNeueRegular.ttf) format('truetype'),
         url(BebasNeueRegular.svg) format('svg');

    font-weight: normal;
    font-style: normal;
}

【问题讨论】：

技术说明：使用 WOFF/WOFF2，不要使用任何其他格式 - 它们在过去是必需的，但现在已经多年没有必要了。有关更多详细信息，请参阅stackoverflow.com/a/37091681/740553。

标签： css fonts font-face

【解决方案1】：

出现 404 错误 - 98% 是因为路径错误。

只是一个想法 - 你提到你将它们移到 SASS 部分？可以从站点访问此文件夹吗？根据我的经验，您的 SASS 将编译成某种 public 目录。

为了排除故障...理论上，您应该可以添加www.yourdomaincom/path-to-font/font.eot并提供下载文件。

如果你不是，那么这确实是错误所在路径的问题。至于为什么其他字体可以工作，如果不更好地了解您的项目设置方式，我将无法说出。

只需我两分钱就可以帮助您解决问题！

【讨论】：

更明确：css字体声明中的url路径需要匹配从该css文件的位置来看。

【解决方案2】：

确保您的 @font-face 与您在 CSS 上使用的 font-family 匹配：

font-family: 'Bebas Neue'; 关于所有内容或：
font-family: 'BebasNeueRegular'; 无所不能。

喜欢：

@font-face {
    font-family: 'BebasNeueRegular';
    src: url(BebasNeueRegular.eot);
    src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
         url(BebasNeueRegular.woff) format('woff'),
         url(BebasNeueRegular.ttf) format('truetype'),
         url(BebasNeueRegular.svg) format('svg');

    font-weight: normal;
    font-style: normal;
}

匹配 css 使用：

.selector {
  font-family: 'BebasNeueRegular', sans-serif;
}

或者：

@font-face {
        font-family: 'Bebas Neue';
        src: url(BebasNeueRegular.eot);
        src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
             url(BebasNeueRegular.woff) format('woff'),
             url(BebasNeueRegular.ttf) format('truetype'),
             url(BebasNeueRegular.svg) format('svg');

        font-weight: normal;
        font-style: normal;
    }

匹配：

.selector {
  font-family: 'Bebas Neue', sans-serif;
}

【讨论】：