Question

我已经在html中创建了一个模板，并导入了一个名为＆＃34; abc.ttf＆＃34;的文本。在css中使用@ font-face。但它不能正常工作，因为它显示的是默认文本而不是导入的文本。我正在使用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;
    }

字体的目录结构： enter image description here

Answer 1

您首先 convert your font 加入了扩展程序（eot，woff，ttf，svg）或其他方式你可以下载web font-face。
将您的字体文件（分机号：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;
}

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

@ font-face不显示预期结果

1 个答案: