Question

我试图让Bebas Neue字体工作，我设法将我的字体转换为各自的字体，但每当我在浏览器中加载字体时，我都会收到错误。

Firebug抛出：

可下载字体：下载失败

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;
}

Answer 1

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

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

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

如果你不是，那么它确实是错误所在的路径问题。至于为什么其他字体工作，我不能说没有更好地了解你如何设置你的项目。

我的两分钱值得帮你解决问题！

Answer 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;
}

无法使用Bebas Neue自定义字体

2 个答案: