Question

我在网上浏览过并决定使用以下@ font-face实现：

我的CSS：

@font-face {
font-family: matt;
src: url("/uploads/testing/Interstate-Regular.eot?#iefix") format('embedded-opentype')
     url("/uploads/testing/Interstate-Regular.ttf")  format('truetype');
}
h5.pleasework {
font-family: matt;
font-size:72px;
}

我的HTML：

<head>
 <link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/testingStyle'}" />

</head>
<h1> this is a test </h1>

<img src="/uploads/features/featured-block_inthenumbers.png" alt="Smiley face" height="420" width="420">
<img src="/uploads/testing/awesomeness.jpg" alt="Smiley face" height="420" width="420">

<div id="happiness">
    <h5 class="pleasework"> PLEASE WORK FOR ME </h5>
</div>

无论出于何种原因，字体都不会生成，但是图片会生成，结果让我怀疑问题在于src参数中的url标记。

有什么想法吗？非常感谢帮助。

提前致谢！

Answer 1

试试这个......

确保将@font-face放在样式表的顶部

@font-face {  
  font-family: "Interstate-Regular";  
  src: url(/uploads/testing/Interstate-Regular.eot);
  src: local("Interstate-Regular"), url(/uploads/testing/Interstate-Regular.ttf) format("truetype");
} 

h5.pleasework {
font-family: "Interstate-Regular";
font-size:72px;
}

但是，如果你只使用.tff，那么它会是这样的：

@font-face {  
      font-family: matt;  
      src: url(/uploads/testing/Interstate-Regular.ttf) format("truetype");
    } 

h5.pleasework {
font-family: matt;
font-size:72px;
}

希望这有帮助！

修改

这个网站非常有帮助:(请参阅章节：＆＃39; @ font-face的工作原理：简单的Peasy＆＃39;＆amp;＆＃39;星期一，真的很简单吗？＆＃ 39; http://randsco.com/index.php/2009/07/04/p680

@ font-face无法从服务器生成字体

1 个答案: