文章/答案/技术大牛

发布

社区首页 >问答首页 >@font_face问题

问@font_face问题
EN

Stack Overflow用户

提问于 2011-08-05 21:12:28

回答 3查看 677关注 0票数 0

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

css

fonts

types

font-face

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-08-08 21:50:10

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

在经历了几天的挫折之后，我明白了这一点，我不会再犯这个简单的错误了，感谢所有帮助过我的人。

票数 0

Stack Overflow用户

发布于 2011-08-05 21:23:53

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

OTF只支持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:正常；font-style:正常；

}

票数 0

Stack Overflow用户

发布于 2011-08-05 21:37:23

一种可能是你安装了NoScript (或类似的)？众所周知，除非您允许，否则会阻止web字体。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6956837

复制

相似问题

问@font_face问题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@font_face问题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@font_face问题
EN