我的电脑上有一个本地字体文件夹,我想在我的 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/