在HTML 5中使用自定義字體

我在我的項目中使用HTML 5我只想嘗試使用自定義字體，但似乎網上的可用教程似乎不起作用，我完全迷失了方向。在HTML 5中使用自定義字體

我爲此使用了960網格系統。自定義CSS是我把我的自定義字體CSS。

這是我在HTML 5

<!doctype html> 
<html lang="en"> 

<head> 




<meta charset="utf-8"> 


<title>LOGIN PAGE</title> 
    <meta name="description" content="Administrator"> 
    <link rel="stylesheet" type="text/css" media="screen" href="style/reset.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="style/960_12_col.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="style/custom.css" /> 

</head> 
<body> 
    <div id="main-container" class="container_12"> 

    <h1>HEAD</h1> 
    <form> 
     <ul id="main-login" class="push_2"> 
     <li><p >USERNAME</p> <input type="text" name="cai_uname" /></li> 
     <li><p>PASSWORD</p> <input type="password" name="cai_pass" /></li> 
     <li><input type="submit" name="cai_login" value="LOGIN" /></li> 
     </ul> 

    </form> 
</body>

下面的代碼是CSS

@font-face{ 
    font-family: AzoftSans; 
    src: url('font/azoft-sans.eot'); 
    src: url('font/azoft-sans.eot?#iefix') format('embedded-opentype'), 
     url('font/azoft-sans.ttf') format('truetype'); 
} 

body{ 
    background:#666666 url("../images/bg_login_half.jpg") repeat-x; 

} 
h1{ 
    font:bold 24pt/2 AzoftSans, Tahoma, Arial, Verdana, sans-serif; 
    text-align: center; 
}

我不會糊960 gridsystem復位960_12_col.css它可在線。我不知道如果它影響我的CSS。

感謝的答覆

來源

2012-10-21 Rex Tajanlangit

當我有這樣我使用鉻（F12）檢查所有的鏈接，我的文件是正確的錯誤。我注意到你的背景

'../images/*.jpg'

嘗試：

'../font/*.*'

這是正確格式化看起來對上你的，則嘗試將.TTF第一。

@font-face 
{ 
font-family: myFirstFont; 
src: url('Sansation_Light.ttf'), 
    url('Sansation_Light.eot'); /* IE9 */ 
}

來源

2012-10-21 11:47:39

代碼工作，上支持的瀏覽器中，當Azoft Sans字體已被下載，與FontSquirrel加工，並安裝在HTML文檔的文件夾下的適當的文件夾（fonts）。所以這個過程中的某個步驟失敗了。很明顯，你並沒有使用正常的FontSquirrel生成的字體文件和CSS代碼，因爲你的@font-face只涉及EOF和TTF文件，但FontSquirrel也會生成WOFF和SVG。

因此，請檢查您是否正確執行了該過程。另外檢查例如生成的TTF文件：你能打開它嗎？如果將它作爲普通字體安裝在系統中會發生什麼？仔細檢查文件和文件夾名稱。如果問題仍然存在，請在網絡上設置測試頁並顯示URL。

來源

2012-10-21 13:12:23

我檢查了它的好字體。我實際上將它安裝在我的系統中，並且在我直接使用它時起作用。字體：「Azoft Sans」，Tahoma，sans-serif;但是就在我使用font-face的時候，我遇到了問題。當我使用字體松鼠的字體生成器時，我遇到另一個字體被破壞的問題。我不確定發生了什麼？ –

可能性是*有*字體本身有問題。嘗試從我鏈接到的頁面或直接從字體作者的頁面加載它：http://www.azoft.com/fonts/ –

感謝Jukka的幫助。我嘗試了另一種字體，並在fontsquirrel網站生成，它的工作。也許我可以使用另一種字體作爲替代。謝謝Jukka。 –

在HTML 5中使用自定義字體

回答

相關問題