@font_face问题
这个调用在 CSS 开头声明的字体的问题已经困扰了我一天。我检查了很多资源，代码似乎没问题，但也许我遗漏了一些东西。我已放入 @font 字体并尝试在 h1 标头中使用它，但它不起作用。
预先感谢各位。
HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Photoblog</TITLE>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</HEAD>
<BODY>
<div id="container">
<header>
<H1>Howard Tang</H1>
</header>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id='container'>
<aside>
<h2>About Me</h2>
<p>Hello here is some placeholder text.Hello here is some placeholder text.Hello here is some placeholder text.</p>
</aside>
<article>
<h2>Welcome:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic1.jpg" alt="Angry face" class="resize"/>
</article>
<article>
<h2>First Impressions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic2.jpg" alt="Angry face" />
</article>
<article>
<h2>Bro</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic3.gif" alt="Angry face" />
</article>
<footer>
<p>By Howard Tang</p>
</footer>
</div>
</BODY>
</HTML>
CSS：
@font-face {
font-family: 'Blackout';
src: url('fonts/Blackout2.ttf');
font-weight: normal;
font-style: normal;
}
body {
background-color:#F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}
header h1 {
background-color: #1C140D;
color: #ffffff;
display:block;
height: 80px;
width: 900px;
text-align : left;
line-height: 80px ;
font-size: 60px;
font-family:'Blackout',Sans-Serif;
margin-bottom: 0px;
}
nav ul {
list-style : none;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px;
padding-left: 0px;
text-align : center;
}
nav ul li {
color : #111111;
margin: 0px;
display : block;
}
nav {
width:1900px;
align:center;
background-color:#F2E9E1;
margin-top: 20px;
margin-left: 0px;
padding: 0 0 0 0;
}
nav a {
color : #111111;
}
nav ul li {
display : inline;
}
article {
background-color: #CBE86B;
float: left;
padding: 20px 20px 40px;
width: 560px;
height: 560px;
}
article img {
float: left;
height : 350px;
width : 550px;
}
aside {
background-color: #1C140D;
color: #CBE86B;
float: right;
padding-left: 20px;
padding-right: 20px;
width: 260px;
height: 1840px;
padding-top: 20px;
}
#container {
width : 900px;
margin : 0 auto;
}
footer {
margin-top: 20px;
text-align: left;
}
This problem with calling up the font that has been declared at the start of the CSS has been bugging me for a day. I've checked many resources and the code seems to be ok, but maybe i'm missing something. I've put in the @font face and tried to use it in my h1 header but it doesn't work.
Thanks in advance guys.
HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Photoblog</TITLE>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</HEAD>
<BODY>
<div id="container">
<header>
<H1>Howard Tang</H1>
</header>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id='container'>
<aside>
<h2>About Me</h2>
<p>Hello here is some placeholder text.Hello here is some placeholder text.Hello here is some placeholder text.</p>
</aside>
<article>
<h2>Welcome:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic1.jpg" alt="Angry face" class="resize"/>
</article>
<article>
<h2>First Impressions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic2.jpg" alt="Angry face" />
</article>
<article>
<h2>Bro</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic3.gif" alt="Angry face" />
</article>
<footer>
<p>By Howard Tang</p>
</footer>
</div>
</BODY>
</HTML>
CSS:
@font-face {
font-family: 'Blackout';
src: url('fonts/Blackout2.ttf');
font-weight: normal;
font-style: normal;
}
body {
background-color:#F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}
header h1 {
background-color: #1C140D;
color: #ffffff;
display:block;
height: 80px;
width: 900px;
text-align : left;
line-height: 80px ;
font-size: 60px;
font-family:'Blackout',Sans-Serif;
margin-bottom: 0px;
}
nav ul {
list-style : none;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px;
padding-left: 0px;
text-align : center;
}
nav ul li {
color : #111111;
margin: 0px;
display : block;
}
nav {
width:1900px;
align:center;
background-color:#F2E9E1;
margin-top: 20px;
margin-left: 0px;
padding: 0 0 0 0;
}
nav a {
color : #111111;
}
nav ul li {
display : inline;
}
article {
background-color: #CBE86B;
float: left;
padding: 20px 20px 40px;
width: 560px;
height: 560px;
}
article img {
float: left;
height : 350px;
width : 550px;
}
aside {
background-color: #1C140D;
color: #CBE86B;
float: right;
padding-left: 20px;
padding-right: 20px;
width: 260px;
height: 1840px;
padding-top: 20px;
}
#container {
width : 900px;
margin : 0 auto;
}
footer {
margin-top: 20px;
text-align: left;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
每个浏览器都支持不同类型的字体（ http://sixrevisions.com/css/font-face- guide/ ):
Chrome 支持 TTF 和 SVG。
所以你的CSS应该是这样的：
@font-face{
}
Every browser support different type of font ( http://sixrevisions.com/css/font-face-guide/ ):
Chrome supports TTF and SVG.
so your css should look like this:
@font-face {
}
可能是您安装了 NoScript（或类似的）？众所周知，除非您允许，否则会阻止网络字体。
A possibility is that you have NoScript (or similar) installed? It's known to block web fonts unless you allow them.
事实证明，问题在于字体 src 路径是相对于样式表文件的。所以我的字体实际上位于错误的文件夹中，这意味着代码没问题，但这是一个简单的路径错误。
经过几天的挫折，我想通了，不会再犯这个简单的错误，感谢所有提供帮助的人。
It turns out the problem was that font face src pathing is relative to the stylesheet file. So my fonts were actually in the wrong folder, which meant the code was ok but it was a simple pathing error.
I figured it out after a couple of days of frustration and will not be making this simple mistake again, thanks to everyone who helped.