Chrome @ font-face问题

时间:2015-04-19 08:37:39

标签: html css google-chrome firefox webfonts

我最近在Chrome上显示字体时遇到了问题,它仍适用于Firefox和I.E.但不再在Chrome或Chrome Android上加载。

在Chrome Inspector中,加载了字体文件,并且所有适当的css规则似乎都已到位。

Chrome只会显示一个方框来代替每个字符。 css看起来像这样:

@font-face {

  font-family: "SSSocialRegular";src: url('font/ss-social-regular.eot');
  src: url('font/ss-social-regular.eot?#iefix') format('embedded-opentype'),
       url('font/ss-social-regular.woff2') format('woff2'),
       url('font/ss-social-regular.woff') format('woff'),
       url('font/ss-social-regular.ttf')  format('truetype'),
       url('font/ss-social-regular.svg#SSSocialRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

我尝试删除加载的字体文件以强制chrome加载true类型和svg字体,但结果相同。

铬:

Chrome font error

火狐:

Firefox font display

1 个答案:

答案 0 :(得分:1)

如果有人遇到这个错误,我也可以通过重新应用

来解决它
display:inline-block;

到我的:在页面加载后的元素之前。我刚刚对chrome进行了简单的.js检查,因为这个bug只会影响我的新版本:

jQuery(window).load(function(){

   var isChrome = !!window.chrome && !!window.chrome.webstore;
   if(isChrome){
       jQuery('body').addClass('isChrome');
   }
});

和css

.isChrome .ss-social-regular.ss-instagram:before,.isChrome .ss-social-regular.ss-facebook:before,
.isChrome .ss-social-regular.ss-twitter:before,.isChrome .ss-social-regular.ss-pinterest:before {
 display:inline-block;
}