html - 在本地计算机的 css 中调用@font-face

标签 html css

我的电脑上有一个本地字体文件夹,我想在我的 css 中调用它。我正在使用@fontface,但我不知道我是否正确地完成了这里的所有操作,这是我的 CSS,我们将不胜感激。谢谢。

@font-face {
  font-family: "CrimsonText-BoldItalic";
  src: local("C:\Users\joel.CDF\Desktop\depot square\Crimson_Text.ttf");

}
@font-face {
  font-family: "PT_Sans-Web-Bold";
  src: url("C:\Users\joel.CDF\Desktop\depot square\PT_Sans.ttf");
}


#mainheadercontent {
    margin-top: 8%;
    text-shadow: 3px 4px 5px #000;
      font-family: "CrimsonText-BoldItalic";
}
#mainheaderbutton {
    margin-top: 1%;
     font-family: "PT_Sans-Web-Bold";

}
<body>
  <div class="container-fluid main-content">
    <div class="row">
      <div class="col-md-12">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img src="images/venue2.png" alt="First slide" class="img-responsive">
              <div class="carousel-caption">
                <h3></h3>
                <p>
                </p>
              </div>
            </div>
            <div class="item">
              <img src="images/mainimg01.png" alt="Second slide"class="img-responsive">
              <div class="carousel-caption">
                <h3>
                                </h3>
                <p>
                </p>
              </div>
            </div>
            <div class="item">
              <img src="images/mainimg01.png" alt="Third slide"class="img-responsive">
              <div class="carousel-caption">
                <h3>
                               </h3>
                <p>
                </p>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                        </span></a>
        </div>
        <div class="main-text hidden-xs">
          <div class="col-md-12 text-center">
            <h1>
                        <img src="images/dslogo1.png" alt="depot square"></h1>
            <h1 id="mainheadercontent">
                        Your elegant and affordable destination<br>for family, business and community events.
                    </h1>
            <div class="button" id="mainheaderbutton">
              <a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">MORE ABOUT US</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CHECK AVAILABILITY</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="push">
  </div>

最佳答案

关于如何使用 local(),您的 CSS 语法不正确。 您使用 local() 调用可能安装在用户计算机上的字体。

当您调用 Crimson Text 时,它应该看起来像这样:

@font-face {
   font-family: MyFont;
   src: url(ExampleFont.ttf);
   font-weight: bold;
}

这应该只在本地工作(根据您的问题假设),但如果您正在寻找跨所有计算机的解决方案,那么我将编辑我的问题。由于您仅在 Crimson 文本上使用了 local(),因此 PT Sans 加载正确。

如果您坚持使用 local() 函数,请阅读更多相关信息 here .

关于html - 在本地计算机的 css 中调用@font-face,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37080892/

相关文章:

html - iframe float 在顶部和右侧

css - 使用 GAS 在 flextable 中对齐和间距按钮文本

javascript - 有什么方法可以从另一个元素获取 css 值,并将其与另一个元素相加吗?

javascript - 如何在页面 Page.IsPostBack 之后禁用 JavaScript 函数

javascript - 仅当浏览器高度小于页面时,如何使用 jquery 显示 "back to top"按钮?

javascript改变父元素样式

html - 你如何强制html中的段落不换行?

javascript - 我怎么知道 <video></video> 元素内的视频何时完全加载?

javascript - 如何更改此联系表单的 Javascript,以便如果 key 是其他内容,则执行不同的操作?

jquery - 如何在空时隐藏/删除 DIV