我已经在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;
    }

字体的目录结构: 在此处输入图片说明

===============>>#1 票数:0

  1. 首先,您将字体转换为扩展名( eotwoffttfsvg )或另一种下载Web字体的方式。

  2. 将字体文件(扩展名: eotwoffttfsvg )复制到目标路径

  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浏览器的字体支持。

  ask by Faisal Naseer translate from so

未解决问题?本站智能推荐:

2回复

字体未加载

我在我的网站上使用了一些服装字体,但是我遇到了一个问题,因为它没有被加载,因此我无法找出问题所在,这是代码: ChromeYellowNF工作正常。 我也试图把每个人都用不同的Font-face但没有用。
2回复

浏览器@ font-face TTF支持

我只想使用TTF格式的自定义字体,因此我需要执行一个脚本来检测TTF格式对@font-face的支持。 我有什么选择?
2回复

CSS Font-Face网址不起作用?

我在使用@ font-face选择器时有些麻烦,我有以下内容...... 只有我的字体没有呈现,而是我显示我的后备,arial。 如果我将字体粘贴到我的浏览器中,它会要求我下载,所以我知道链接是正确的,上面有什么我做错了吗? 我用...调用字体 谢谢
1回复

多个字体声明时出错

CSS @font-face规则: 及其用途: 这是我的HTML: 问题在于,不仅是本节的代码,整个页面都在转换为font-weight:light ,我也不知道为什么。 任何帮助,将不胜感激。
3回复

Socicon字体未与@ font-face一起显示

我想在标题中使用一种名为socicon( http://socicon.com/ )的字体,而不要使用.png的社交图标。 因此,我可以更轻松快捷地设置图标样式。 因此,我按照了socicon网站上给出的说明进行操作,这是我的代码示例 // HTML // CSS
4回复

为什么此CSS字体外观代码无法加载字体

我已经在CSS中编写了以下代码来加载字体。 对该路径进行了双重检查,它们很好,但是我不知道为什么它不会加载它们。 直到几天前它一直有效。 现在,它不起作用。 这是书面代码:
1回复

字体无法在Firefox或IE中使用

我真的不知道发生了什么事。 我使用的是Font Squirrel的@Font Face Packs,它不能在Firefox和IE中使用 ,但是它在Chrome和Android的浏览器中都可以正常使用,但我没有尝试过Safari。 这些包应该可以无缝地工作,这是它们的全部重点,但事实并非如
1回复

Firefox上未显示Squarespace上的@ font-face

我正在Squarespace上建立网站,并且尝试使用@ font-face命令实现一些字体。 我可以使其在Chrome和Safari中正常工作,但不能在Firefox中正常工作。 这是我的代码... 有任何想法吗? 编辑:我已经看到一些使用访问控制标头提及跨站点字体使用情况
2回复

什么时候下载了后备字体?

如果我将Google字体设置为后备字体,如下所示: 如果主字体失败,Google字体是否只会下载到用户的浏览器?
2回复

字体未加载到我的HTML页面

我的CSS文件中有此代码。 这是我网页的结构 根 index.html 的CSS style.css 的字体 Tishk.ttf 子文件夹