使用.otf缺少Content-Type Header font-face

Question

我使用laravel框架。但是在Chrome控制台中发生此错误并且font-family无效。

  

无法加载资源：服务器响应状态为500（缺少内容类型标头）

在css中：

@font-face{
  font-family: 'HelveticaNeue';
  src: url(../fonts/HelveticaNeue.otf);
}

搜索后我发现添加format（）可以解决问题。我改变了这个：

@font-face{
 font-family: 'HelveticaNeue';
 src: url(../fonts/HelveticaNeue.otf) format(opentype);
}

现在错误没有显示在控制台中，但font-family仍无效。

My file structure is: 
public
    css
    fonts

感谢。

Answer 1

如果您没有为该资产收到404错误，则问题可能是Chrome不喜欢.otf字体格式。

您可以使用FontSquirrel Webfont生成器生成一组完整的webfont类型：https://www.fontsquirrel.com/tools/webfont-generator

如果您执行获得404错误，则可能需要为服务器添加必要的mimetypes以便能够提供字体。查看这个小指南，了解如何为apache或nginx启用此功能： https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

无论哪种方式，总是值得使用.ttf和.woff字体来实现跨浏览器兼容性，因此请务必在FontSquirrel上生成完整的字体工具包。