@ font-face无效

Question

嗨，我很确定我在@ font-face配置中做错了，因为它不能在任何浏览器中运行，这是我的css文件：

@font-face {
     font-family: BodyFont;
     src: url('../ItcKabMed.eot');
     src: local('ITC Kabel'),
          url('../Kabel_ITC') format('opentype'),
          url('../Kabel_ITC') format('svg');
}
body {
  font-family: 'BodyFont';
  color: #797979;
  background: url("") repeat-x scroll 0 0 #d7d7d7;
  min-width: 1000px;
}

一些想法，为什么我的字体没有出现？！

Answer 1

您确定没有忘记字体路径中的文件扩展名吗？

Answer 2

就像你可以看到here一样，为了在使用@font-face时实现跨浏览器的成功，我们需要使用许多字体格式。因此，将您的字体转换为eot，ttf和svg并明确使用以下格式：

@font-face {
    font-family: 'ITC Kabel';
    src: url('ITCKabel.eot');
    src: local('ITC Kabel'), 
         local('ITCKabel'), 
         url('ITCKabel.ttf') format('truetype'),
         url('ITCKabel.svg#font') format('svg'); 
}