@ font-face在Firefox中不合作

Question

我嘗試了很多東西，包括點擊與我的問題相關的所有問題（有噸！）並嘗試了所有的“解決方案”，但沒有一個對我有用。 我嘗試在條件IE語句中包裝.eot文件，但這也不起作用。 有人說，如果你沒有在自己的服務器上托管文件，@ font-face將無法在Firefox中運行......或類似的東西。 無論如何，去這里看看所有其他瀏覽器與Firefox之間的比較。 請不要打！ 我確實嘗試過Google和stackoverflow提供的所有解決方案。 （請記住，這是Tumblr主題，所有文件/圖像必須通過Tumblr的上傳程序托管。）

提前致謝！

此外，這是我一直在使用的代碼：

<!--[if IE]>
<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
}
</style>
<![endif]-->

<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('S'), 
     local('S'), 
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
</style>

我嘗試在Firefox中進行about：config並將security.fileuri.strict_origin_policy切換為false，但它不起作用。 另外，我需要一種方式，以便所有查看我的主題或使用它的用戶也能夠查看字體，默認情況下設置為true。

Answer 1

編輯：

以下是解決方案： 跨域解決方法

Firefox不喜歡跨域嵌入。

Answer 2

伯爵，我不想成為一個告訴你的人，但你的問題不在於你的@ font-face規則。 至少在我查看你的網站時並不是這樣。 當您使用CSS font-family時，您需要確保所選堆棧中每種不同字體之間都有逗號。 你的h6選擇器是：

h6 {font-size:36px; font-family: 'S' sans-serif;}

它應該是：

h6 {font-size:36px; font-family: 'S', sans-serif;}

嘗試一下，我認為這對你來說很有用。 只需確保所有font-family堆棧在多種字體之間都有逗號。 Firefox對解析技術上不正確的CSS有點嚴格; Firefox只是忽略它。 這似乎是你遇到問題的原因，而不是你的@ font-face。

Answer 3

我不完全相信你的@ font-face規則。 你可以復制以下內容，看看它有什么區別（如果有的話）嗎？ 只是為了清理東西。

@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('☺'),
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}

這只是清理了一些小問題。 我還建議將字體名稱更改為“S”以外的名稱; 例如，“Zegoe Light”。

Ivo Wetzel在您的評論中是正確的，但這可能是Tumblr提供具有未知文件擴展名的媒體的方式的問題。

Answer 4

我遇到了類似的問題，它可以在任何地方使用，但不適用於Mac上的Firefox4。 我在另一個@media塊中聲明了@ font-face-Stuff（僅為非移動設備加載字體） - 這就是導致錯誤的原因。

這不起作用：

@media sth... {

  @font-face {
    ...
  }

}

這確實有效：

@font-face {
  ..
}

@media sth... {

}