@ font-face不顯示預期結果

我已經在html中創建了一個模板，並且在@ss font-face的css中導入了一個名爲「abc.ttf」的文本。但它不能正常工作，因爲它顯示的是默認文本而不是導入的文本。我正在使用Google Chrome。進一步有任何模擬器類型的工具，這將讓我觀察我的模板結果在不同的瀏覽器。@ font-face不顯示預期結果

的index.html：

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
    <meta charset="UTF-8"/> 
    <meta keyword="Qais" discription="This template is made by Muhammad Qais"/> 
    <title>First template</title> 
    <link rel="stylesheet" href="Style/style.css" name="Qais" type="text/css"/> 
    </head> 

    <body> 
    <div id="body-container"> 
     <div id="header"> 
     <p>MY FONT TEST</p> 
     </div> 

     <div id="below-header"> 
     <div id="sidebar"> 

     </div> 

     <div id="content-container"> 
      <div class="content-box"> 

      </div> 

      <div class="content-box" > 

      </div> 
      <div class="content-box"> 

      </div> 
      <div class="content-box"> 

      </div> 
     </div> 

     <div id="footer"> 
     </div> 
     </div> 
    </div> 
    </body> 

</html>

CSS部分：字體

@font-face{ 

    font-family:"ABC"; 
    src:url("fonts/Body/ABC.eot?") format("eot"), 
     url("fonts/Body/ABC.woff") format("woff"), 
     url("fonts/Body/ABC.ttf") format("truetype"), 
     url("fonts/Body/ABC.svg#ABC") format("svg"); 
     font-weight:normal; 
    font-style:normal; 

} 

    #body-container { 
     width: 100%; 
     height: 800px; 
    } 

    #header { 

     width: 100%; 
     height: 150px; 
    font-family: ABC; 
    background-color:red; 
    color:  blue; 
    clear:  both; 
    position: fixed; 
    top:  0px;  
    z-index: 10; 
    } 

    #below-header { 
     width: 100%; 
     height: 650px; 
     position: relative; 
     top: 140px; 
    } 

    #sidebar { 
     width: 25%; 
     height: 500px; 
     background-color: purple; 
     color: yellow; 
     float: left; 
    } 

    #content-container { 
     width: 75%; 
     height: 500px; 
     background-color: yellow; 
     color: blue; 
     float: left; 
    } 

    .content-box { 
     width: 25%; 
     height: 235px; 
     margin: 5px 10px 5px 175px; 
     border-bottom-style: solid; 
     border-color: rgb(0, 184, 255); 
     border-top-width: 10px; 
     background-color: white; 
     float: left; 
     box-shadow: 4px 3px 2px #888888; 
    } 

    #footer { 
     width: 100%; 
     height: 700px; 
     background-color: green; 
     color: white; 
     clear: both; 
    }

目錄結構： enter image description here

來源

2014-04-20 Faisal Naseer

沒有關於字體本身的信息。其他人不可能驗證瀏覽器是否實際訪問字體文件;你應該使用開發工具來檢查它。如果問題仍然存在，則應提供完整但最少的代碼來重現問題;特別是包含相關的HTML代碼並排除不會影響問題的任何CSS代碼。 –

你先convert your font爲擴展名（eot，woff，ttf,svg）或其他方式可以下載網頁字體。
您的字體文件（擴展名：eot，woff，ttf，svg）複製到目標路徑

更新CSS樣式（字體相對路徑的基礎）

@font-face { 
    font-family:"ABC"; 
    src:url("fonts/Body/ABC.eot?") format("eot"), 
     url("fonts/Body/ABC.woff") format("woff"), 
     url("fonts/Body/ABC.ttf") format("truetype"), 
     url("fonts/Body/ABC.svg#ABC") format("svg"); 
    font-weight:normal; 
    font-style:normal; 
}

現在你檢查所有網頁瀏覽器的字體支持。

來源

2014-04-20 16:48:43

它已經在.tff所以爲什麼要轉換 –

你還需要eot，woff，ttf，svg文件格式的擴展名。你只想使用谷歌Chrome瀏覽器，你應該使用這個'url（「ABC.ttf」）格式（「truetype」），' –

現在我已經應用了包含所有字體命名的目錄結構「fonts/Body /」 ABC.eot，ABC.ttf，ABC.svg，ABC.woff ....並替換了上面提到的css，但仍然沒有效果...... –

@ font-face不顯示預期結果

回答

相關問題