我使用 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
谢谢。
最佳答案
如果您没有收到 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 上生成完整的字体套件。
关于css - 缺少带有 .otf 的内容类型 header 字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38953194/