Missing Content-Type Header font-face with .otf

Question

我使用laravel框架。但是在chrome控制台这个错误发生和font-family不工作。

加载资源失败:服务器响应状态为500 (Missing Content-Type Header)

在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错误，你可能需要添加必要的mime类型为您的服务器能够提供字体。看看这个小指南，看看如何在apache或nginx上启用它:https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

---

无论如何，拥有.ttf和.woff字体对于跨浏览器兼容性总是值得的，所以一定要在FontSquirrel上生成一个完整的字体工具包。