2014-07-15 109 views
0

嘿所以我問了一個問題,但沒有得到任何地方,所以我雖然這將是一個好主意,因爲我'新的這個。無論如何,我想知道是否有人能說出我在這裏做錯了什麼。我爲一個項目使用自定義字體,但它似乎只能用chrome渲染。我試過使用@fontface結構,但它仍然不能工作。任何幫助將非常感激!@ font-face自定義字體的問題

<!DOCTYPE html > 

<html lang="en"> 
<head> 
<title>Fire House Home</title> 
    <style type="text/css"> 
    <!-- 
    @font-face { 
     font-family: 'Didot HTF'; 
     src: url('DidotHTF.eot?') format('eot'), 
       url('DidotHTF.woff') format('woff'), 
       url('DidotHTF.ttf') format('truetype'), 
       url('DidotHTF.svg#DidotHTF') format('svg'); 
    }  
    #p1{ 
     position:relative; 
     font-family: "Didot HTF"; 
     font-size:120%; 
     top: 300px; 
     text-align:center; 
     white-space: nowrap; 
    } 



    --> 

    </style> 

</head> 

<body> 

<div id="p1"> 
    Content, storytelling and strategy for the multi-screen, multi-channel age 
</div> 




</body> 
</html> 
+0

我想澄清一下您指定字體文件夾的路徑? –

+0

檢查瀏覽器控制檯是否訪問字體文件時沒有錯誤。 – XIMRX

+0

你應該參考你以前的問題,http://stackoverflow.com/questions/24755149/font-wont-render-in-different-browsers。改善舊問題而不是產生副本會更好。無論如何,這個問題仍然缺乏足夠的信息。例如,您從哪裏得到字體,您是如何生成字體文件的,您是如何仔細檢查字體文件是否在指定地址可用的? –

回答

0

,所以你看到需要生成Web字體web font generator投放在項目文件夾中的字體和@字體面指定的字體 的路徑是這樣

@font-face { 
    font-family: 'SegoePrint'; 
    src: url('../fonts/SegoePrint.eot?') format('eot'), 
     url('../fonts/SegoePrint.woff') format('woff'), 
     url('../fonts/SegoePrint.ttf') format('truetype'), 
     url('../fonts/SegoePrint.svg#SegoePrint') format('svg'); 
} 
+0

我試過使用網絡字體生成器,不幸的是,不要讓我上傳字體,因爲它沒有擴展名。字體文件看起來像這樣DidotHTF-11MediumItalic – jdv12

+0

http://www.web-font-generator.com/results?dir=a401adaebded76ab6ec14603e09107d0 –

+0

感謝您的幫助,但由於某種原因,它仍然無法正常工作!我下載了zip文件,並將所有的webfont文件放在一個名爲fonts的文件夾中,並將其移動到帶有我的html文件的文件夾中,所以現在我的文件夾包含字體和html文檔,現在我的代碼如下所示: – jdv12