个人中心
gpt4 book ai didi

css - @font-face 未显示预期结果

转载 作者：行者123 更新时间：2023-11-28 10:39:52 25 4
gpt4 key购买 nike

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

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

最佳答案

  1. 你先 convert your font 扩展(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;
    }

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

关于css - @font-face 未显示预期结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23184951/

25 4 0
文章推荐： javascript - 通过javascript计算服务器上上传的数据
文章推荐： javascript - 如何将 onChange 事件绑定(bind)到导入类中的函数？
文章推荐： javascript - 有没有可以运行的videojs + rtmp示例？
文章推荐： javascript - 使用来自 asp.net gridview 函数的 jquery 的客户端搜索文本框不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com