@font_face problem_问答_开发者_运维开发者技术经验分享

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

Every browser support different type of font ( http://sixrevisions.com/css/font-face-guide/ ):

Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG

Chrome supports TTF and SVG. so your css should look like this:

@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;

}

A possibility is that you have NoScript (or similar) installed? It's known to block web fonts unless you allow them.

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.