@ font-face不適用於Chrome，Firefox，IE

這是我的CSS代碼：@ font-face不適用於Chrome，Firefox，IE

字體無法正常工作。我錯過了什麼？

我想提一提，它不是在本地安裝操作系統的，我敢肯定的URL轉到字體正好

@font-face { 
    font-family: 'ma'; 
    src: url('http://localhost/header/images/FS_Old.ttf'); 
} 

.menu_head { 
    width: 100%; 
    position: relative; 
    height: 30px; 
    font-family: 'ma'; 
}

來源

2013-03-25 Majed DH

Localhost將成爲問題，請檢查Chrome Error Console並查看錯誤是什麼。 – 2013-03-25 14:49:18

你檢查過所有的瀏覽器嗎？ – Eli 2013-03-25 14:53:09

那個控制檯在哪裏？ – 2013-03-25 14:53:24

瑞安是正確的。我用一個工作網址替換了您的網址，並且它工作得很好。這是我用過的。

@font-face { 
    font-family: 'ma'; 
    src: url('http://www.cse.buffalo.edu/~rsd7/BaroqueScript.ttf'); 
} 


.menu_head { 
    width: 100%; 
    position: relative; 
    height: 30px; 
    font-family: 'ma'; 
}

來源

2013-03-25 15:09:46

現在的大問題，沒辦法使一個字體在Firefox上工作！ – 2013-03-25 15:20:53

檢出：http://stackoverflow.com/questions/11616306/css-font-face-absolute-url-from-external-domain-fonts-not-loading-in-firefox你將需要在你的服務器上實現如果您從其他服務器引用的字體不是您自己的/ – 2013-03-25 15:38:54

如果這是被接受的答案，那麼真正的問題與實際要求的不同。 – 2013-03-25 21:11:31

應該可能是因爲Chrome瀏覽器，火狐，IE不支持ttf擴展。你可以嘗試把其他擴展：

@font-face { 
    font-family: 'ma'; 
    src: url('FS_Old.eot'); /* IE9 Compat Modes */ 
    src: url('FS_Old.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('FS_Old.ttf.woff') format('woff'), /* Modern Browsers */ 
     url('FS_Old.ttf.ttf') format('truetype'), /* Safari, Android, iOS */ 
}

來源

2013-03-25 15:10:49 Eli

我用這個網站的字體轉換爲其他類型的http://www.fontsquirrel.com/tools/webfont-generator，並使用了不同的支持的字體類型，並且似乎已經解決了這個問題。這裏是適用於所有瀏覽器的新代碼。

<html> 
<head> 
<style> 


    @font-face { 
    font-family: 'baroque_scriptregular'; 
    src: url('baroquescript.eot'); 
    src: url('baroquescript.eot?#iefix') format('embedded-opentype'), 
     url('baroquescript.woff') format('woff'), 
     url('baroquescript.ttf') format('truetype'), 
     url('baroquescript.svg#baroque_scriptregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

    .menu_head { 
     width: 100%; 
     position: relative; 
     height: 30px; 
     font-family: baroque_scriptregular; 
    } 
</style> 
</head> 
<body> 
<div class="menu_head" > 

    hellod 
    </div> 
</body>

來源

2013-03-25 15:55:33

@ font-face不適用於Chrome，Firefox，IE

回答

相關問題