css - 缺少带有 .otf 的内容类型 header 字体

Question

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

Failed to load resource: the server responded with a status of 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

如果您没有收到 Assets 的 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 上生成完整的字体套件。