爲什麼我的字體不能正常工作？

我的字體適用於chrome，opera和safari，但不適用於ie或firefox。即使在閱讀關於它的其他問題之後，我仍然無法理解@ font-face。爲什麼我的字體不能正常工作？

@font-face { 
font-family: "TikalSansBlack"; 
src: url("./fonts/TikalSansBlack.eot?"); 
src: url("./fonts/TikalSansBlack.woff") format("woff"), 
    url("./fonts/TikalSansBlack.ttf") format("truetype"), 
    url("./fonts/TikalSansBlack.svg") format("svg") 
    url("./fonts/TikalSansBlack.otf") format("opentype"); 
} 

@font-face { 
    font-family: 'TikalSansMedium'; 
    src: url('./fonts/TikalSansMedium.eot?'); 
    src: url('./fonts/TikalSansMedium.woff') format('woff'), 
     url('./fonts/TikalSansMedium.ttf') format('truetype'), 
     url('./fonts/TikalSansMedium.svg') format('svg') 
     url('./fonts/TikalSansMedium.otf') format('opentype'); 
} 

@font-face { 
    font-family: 'TikalSansThin'; 
    src: url('./fonts/TikalSansThin.eot?'); 
    src: url('./fonts/TikalSansThin.woff') format('woff'), 
     url('./fonts/TikalSansThin.ttf') format('truetype'), 
     url('./fonts/TikalSansThin.svg') format('svg') 
     url('./fonts/TikalSansThin.otf') format('opentype'); 
}

here's the website I'm working on

來源

2013-08-28 Seji

請如[的jsfiddle（http://jsfiddle.net）值得信賴的服務創造該問題的一個簡化的測試案例。我不信任隨機網站的鏈接。 – zzzzBov

Firefox中的CSS調試工具會告訴你一切你需要知道的東西 –

嗯不是路徑有點奇怪「url（」./fonts「不應該是」url（「../fonts」？ – drip

你缺少對每個字體

@font-face { 
font-family: "TikalSansBlack"; 
src: url("./fonts/TikalSansBlack.eot?"); 
src: url("./fonts/TikalSansBlack.woff") format("woff"), 
    url("./fonts/TikalSansBlack.ttf") format("truetype"), 
    url("./fonts/TikalSansBlack.svg") format("svg"), <<== put comma here 
    url("./fonts/TikalSansBlack.otf") format("opentype"); 
}

此外，我會關心你的文件路徑的最後一個逗號。如果你想上一級，你需要兩個.而不是一個。也許這就是我們需要的整個

url("../fonts/TikalSansBlack.otf")

來源

2013-08-28 21:13:05 Vector

我不敢相信我沒注意到，謝謝，現在在所有瀏覽器上都能正常工作 – Seji

@Vector'。/'表示'從當前文件夾開始' （'fonts /'和'。/ fonts /'與例如相同）。它與'/'不同，因爲這個指向'從根域開始'而不是'../'，它是'上面的一個文件夾目前的一個' – RaphaelDDL

試試這個，如果不工作，我就會把所有的資源在一個行，如果不工作，那麼刪除的格式屬性。（下面的修補程序在.svg後面添加了一個逗號，這是@ font-face的全部3個問題）。

@font-face { 
     font-family: 'TikalSansThin'; 
     src: url('./fonts/TikalSansThin.eot?'); 
     src: url('./fonts/TikalSansThin.woff') format('woff'), 
      url('./fonts/TikalSansThin.ttf') format('truetype'), 
      url('./fonts/TikalSansThin.svg') format('svg'), 
      url('./fonts/TikalSansThin.otf') format('opentype'); 
    }

來源

2013-08-28 21:12:26 Charles

爲什麼我的字體不能正常工作？

回答

相關問題