使用.otf缺少Content-Type标题字体 [英] Missing Content-Type Header font-face with .otf

问题描述

我使用laravel框架。但在Chrome控制台中发生这个错误， font-family 无法正常工作。
$ b

失败加载资源：服务器响应状态为500（Missing Content-Type Header）

在css中：

  @ font-face {
 font-family：'HelveticaNeue'; 
 src：url（../ fonts / HelveticaNeue.otf）; 
 
 
 
 
 
 
搜索后发现添加format（）可以解决问题。我改成这样：
 
 pre 
 $ font-family：'HelveticaNeue'; 
 src：url（../ fonts / HelveticaNeue.otf）格式（opentype）; 
 
 
 
 
 
 $现在错误不会显示在控制台中，但 font-family  
 
 我的文件结构是：
 public 
 css 
字体
  
谢谢。 
 
解决方案
如果您不要获得资产的404错误，则问题可能是Chrome不喜欢 .otf  font format。 
 
 
您可以使用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上生成一个完整的字体套件。
 
I use laravel framework. But in chrome console this error happening and font-family not working.

  
Failed to load resource: the server responded with a status of 500 (Missing Content-Type Header)
In css:
@font-face{
  font-family: 'HelveticaNeue';
  src: url(../fonts/HelveticaNeue.otf);
}
After searching I found that adding format() can solve problem. and I changed to this : 
@font-face{
 font-family: 'HelveticaNeue';
 src: url(../fonts/HelveticaNeue.otf) format(opentype);
}
Now error not showing in console but font-family still not working.
My file structure is: 
public
    css
    fonts
Thanks.
解决方案
If you don't get a 404 error for the asset, the issue is probably Chrome not liking the .otf font format.

You can generate a complete set of webfont types using the FontSquirrel Webfont generator: https://www.fontsquirrel.com/tools/webfont-generator



If you do get a 404 error you may need to add the necessary mimetypes for your server to be able to serve the fonts. Check out this little guide for how to enable this for apache or nginx:
https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts



Either way it's always worth having your .ttf and .woff fonts for cross browser compatibility, so definitely generate a complete font kit over at FontSquirrel.

                        
这篇关于使用.otf缺少Content-Type标题字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！