我正在建立一个新站点,而webfonts根本无法工作。我从以前制作的网站上窃取了大部分代码以及相同的字体文件,但它们在新网站上不起作用。我使用的是响应式框架,因此我觉得某些事情要比我编写的使用Webfonts的代码具有更高的优先级。

URL是http://willryan.us/responsive,而我(当前)试图制作Webfont的块是顶部的大“ 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>

最佳答案

您的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状态错误,正确加载效果更好:)

关于html - 当代码看起来正确时,Webfonts不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22265386/

10-11 13:15