Question

我的计算机上有一个本地字体文件夹，我试图在我的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>

Answer 1

您使用local()的CSS语法不正确。您可以使用local()来调用可能安装在用户计算机上的字体。

当你打电话给你的Crimson Text时，它应该是这样的：

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

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

如果您坚持使用local()功能，请详细了解here。

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

1 个答案: