当代码看起来正确时,Webfonts无法正常工作

时间:2014-03-08 05:14:59

标签: html css3 fonts font-face webfonts

我正在制作一个新网站,网页字体根本不起作用。我偷了一大堆代码以及我之前网站上的相同字体文件,但它们不适用于这个新网站。我正在使用响应式框架,因此我感觉有些事情优先于我编写的使用webfonts的代码。

网址为http://willryan.us/responsive,而我(当前)尝试制作网页的大块是顶部的“Will Ryan”。

加载字体

  @font-face {
  font-family: 'MuseoSlab700';
  src: url('assets/webfonts/museo_slab_700-webfont.eot') format('eot'), 
       url('assets/webfonts/museo_slab_700-webfont.woff') format('woff'),
       url('assets/webfonts/museo_slab_700-webfont.ttf') format('truetype');
  /* font-weight:200; /* fixes bold bug in Firefox */
  /*-webkit-font-smoothing: antialiased; /* Fixes viewing in Safari. Maybe unnecessary */
  }

标题代码

h1, h2, h3, h4, h5, h6 {
font-family:  'MuseoSlab700', Helvetica, sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: 0;
}

特定标题代码

h2 { 
font-family: 'MuseoSlab700';
color: #222;
margin-bottom : .5em;
margin-top : .5em;
font-size : 2.75em; /* 40 / 16 */
line-height : 1.2;
text-align: center;
}

HTML

<div class="section group">
    <div class="col span_3_of_3">
    <h2><a href="index.html">WILL RYAN</a></h2>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

  • 您的CSS就在这里:http://willryan.us/responsive/css/,更确切地说 styles.css

  • 从那里,您正在尝试加载assets/webfonts/aCertainWebFont.woff

  • 因此,WOFF文件应位于/responsive/css/assets/webfonts/目录中 (在FTP / SSH方面,类似/var/site102/www/responsive/css/assets/webfonts/,但我离题

您可以在网络标签中查看Firebug或Inspector或任何Devtools( F12 ):红色和404状态不好,正确加载更好:)< / p>