@ font-face不適用於ff，chrome和safari（在mac上）

我無法在mac上的任何瀏覽器中使用@ font-face。我相信這是相關的代碼，但我會很樂意粘貼其他作品。 Mac處理這個不同嗎？@ font-face不適用於ff，chrome和safari（在mac上）

@font-face { 
font-family: BebasNeue; 
src: url('fonts/BebasNeue.otf'); 
} 

/*----HEADING----*/ 
.heading { 
font-family: BebasNeue, sans-serif; 
} 

.word1{ 
font-size: 100px; 
position: absolute; 
top: 35px; 
} 

.word2{ 
font-size: 79px; 
color: 6a6964; 
position: absolute; 
top: 54px; 
left: 165px; 
} 

.word3{ 
font-size: 106px; 
position: absolute; 
top: 104px; 
} 

.tagline { 
font-family: BebasNeue, sans-serif; 
font-size: 35px; 
color: c1bcb6; 
position: absolute; 
top: 205px; 
left: 13px; 
} 

.tagWord2{ 
color: 6a6964; 
} 

.copyright { 
font-family: arial, sans-serif; 
color: 6a6964; 
font-size: 13px; 
font-variant: small-caps; 
position: absolute; 
top: 245px; 
left: 215px; 
}

PS我最近有過肩部手術，所以我很感謝您的耐心，同時我用一隻手敲擊鍵盤。謝謝！

***所以我想出了我的錯誤，字體位置有錯誤，我的本地機器已經加載了字體。我沒有足夠的信譽來回答或刪除我自己的問題，所以第一個人發佈這個答案我會標記爲正確的。

來源

2012-02-14 radleybobins

打開一個調試器（螢火蟲等），檢查NET標籤，看到你得到一個404的字體。 – 2012-02-14 20:53:14

200OK，沒有404錯誤 – radleybobins 2012-02-14 20:58:36

你從哪裏得到BebasNeue.otf字體文件？難道它不是一個真正的otf字體嗎？

要使字體完全跨瀏覽器兼容，您需要提供幾種不同格式的字體源。這是一個很好的起點：http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

來源

2012-02-14 21:00:58 Steve

我從dafont得到它，它在ie中工作，在windows中工作......現在在那個鏈接上閱讀 – radleybobins 2012-02-14 21:05:06

如果這是唯一的文件呢？ – radleybobins 2012-02-14 21:09:12

@ font-face不適用於ff，chrome和safari（在mac上）

回答

相關問題