我在网上看了一圈，决定使用下面的@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 标记上。
有什么想法吗？非常感谢您的帮助。
提前致谢!
最佳答案
试试这个...
确保将 @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;
}
希望这对您有所帮助!
编辑:
这个网站非常有用:(引用章节:“@font-face 的工作原理:Easy Peasy”和“拜托，它真的那么简单吗？” http://randsco.com/index.php/2009/07/04/p680
关于html - @font-face 无法从服务器生成字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13367000/