@ 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上）

回答

相关问题