Chrome @ font-face問題

Question

我最近在Chrome上顯示字體時遇到了問題，它仍然可以在Firefox和IE上運行，但不再在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加載真正的字體和svg字體，但這是相同的結果。

鉻：

火狐：

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