html - Chrome @font-face 问题

Question

我最近在 Chrome 上显示字体时遇到了问题，它在 Firefox 和 IE 上仍然有效。但不再在 Chrome 或 Chrome Android 上加载。

在 Chrome 检查器中，字体文件已加载，所有适当的 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 type 和 svg 字体，但结果相同。

Chrome :

火狐:

Answer 1

如果有人遇到这个错误，我也可以通过重新申请来解决

display:inline-block;

到我的 :before 页面加载后的元素。我只是对 chrome 做了一个简单的 .js 检查，因为这个错误只影响我的新版本:

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;
}