@ font-face未显示预期结果

Question

我已经在html中创建了一个模板，并使用@ font-face在css中导入了名为“ abc.ttf”的文本。 但是它不能正常工作，因为它显示的是默认文本而不是导入的文本。 我正在使用Google chrome。 此外，还有任何模拟器类型工具，可让我在不同的浏览器中观察模板结果。

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;
    }

字体的目录结构：

Answer 1

1. 首先，您将字体转换为扩展名（ eot ， woff ， ttf ， svg ）或另一种下载Web字体的方式。

2. 将字体文件（扩展名： eot ， woff ， ttf ， svg ）复制到目标路径

3. 更新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; } 

现在，您检查所有Web浏览器的字体支持。