Question

调用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;
}

Answer 1

每个浏览器都支持不同类型的字体（http://sixrevisions.com/css/font-face-guide/）：

Internet Explorer仅支持EOT
Mozilla浏览器支持OTF和TTF
Safari和Opera支持OTF，TTF和SVG

Chrome支持TTF和SVG。所以你的CSS应该是这样的：

@ font-face {

font-family: 'Blackout';
src: url('/Resources/fonts/Blacout2.eot');
src: url('fonts/Blacout2.ttf'), url('fonts/Blacout2.woff'), url('fonts/Blacout2.svg');
font-weight: normal;
font-style: normal;

}

Answer 2

可能是你安装了NoScript（或类似版本）？众所周知，除非您允许，否则会阻止网络字体。

Answer 3

事实证明，问题是font face src路径是相对于样式表文件的。所以我的字体实际上是在错误的文件夹中，这意味着代码还可以，但这是一个简单的路径错误。

经过几天的挫折之后，我想出来了，并且不会再犯这个简单的错误，感谢所有帮助过的人。

@font_face问题

3 个答案: