即使正确描述，字体也不会加载

Question

我有一个本地存储在resources / fonts /中的字体，我正确引用它，但它不知何故不会加载。我在html中的<style>：

<style>
    @font-face{
        font-family:"franklin_gothic_condensed";
        src:url("resources/fonts/fgc.ttf");
    }
</style>

我使用字体的html：

<p id="missieHead1" class="headText">
    Missie 2014.<br>
    Onze terugkeer.
</p>

我应用字体的CSS：

.headText{
    font-family:"franklin_gothic_condensed";
    color:white;
}

我通过我们的供应商获得了这些字体，该供应商恰好是一家全球知名的德国控股公司，投资于汽车行业。我确保我的网址是正确的，因为我尝试使用同一目录中的其他字体，它们都有效。至于如何创建它们，我不知道，我不相信我能够要求它们是如何创建的。

我真的很想知道我在这里做错了什么，因为我的斗智尽头。看其他问题也没有帮助我。

解决方案：我发现我们的供应商为我们提供了错误的字体。搜索网络上的字体并下载它。

Answer 1

我写这个作为答案，因为上面的评论很难解释。

首先，如上所述，源声明略有错误：

@font-face{
  font-family:"franklin_gothic_condensed";
  src: url("resources/fonts/fgc_____.ttf");
}

其次，您应该将font-family包装在引号中。 CSS spec提供了一些关于引用包含标点符号的字体系列的指南。虽然有些情况下您可以不使用引号，但使用引号通常是个好主意：

.headText{
  font-family: "franklin_gothic_condensed";
  color: white;
}

否则，请确保正在加载.ttf。尝试重命名。

Answer 2

您没有提到您的服务器类型，但如果您使用的是Windows服务器和IIS，则可能需要验证是否已正确设置ttf mimetype。

以下是IIS中Web字体的mimetypes：

.eot   application/vnd.ms-fontobject  
.ttf   application/octet-stream  
.svg   image/svg+xml  
.woff  application/x-woff

Answer 3

声明文件来源的语法是：

src: url('url of the file');

所以，这样做：

@font-face{
    font-family:"franklin_gothic_condensed";
    src:url("resources/fonts/fgc_____.ttf");
}