我真的需要@font-face代码的帮助。它好像没有看到我的字体文件。
我试着改变路径到任何我能想到的，创建新的文件夹，重命名现有的，把字体文件放在我的根文件等。
我正在测试Firefox和Chrome。
以下是我在CSS中尝试过的代码:src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);
你能找出我应该把字体文件放在哪里，或者在我的CSS中做什么改变来让它工作吗?
(我也在这里和网上其他地方检查了类似的问题，并尝试使用这个网站，但无济于事。)
谢谢!
更新:Bozdoz的建议不起作用。我用FontSquirrel来获取字体。这是CSS:
@font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1{ font-size: 110px;
font-family: 'lane', georgia, serif;
color: #000000;
}
我使用'lane'这个名字只是因为bozdoz有这个名字。
所有字体都在这里:
http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/
，这些是它们的名字:
univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg
你使用正确吗?下面是@font-face的格式。注意文件的数量。您可以使用Font Squirrel创建跨浏览器兼容性所需的所有字体。而且，它看起来像你在使用WordPress。我相信你必须在WordPress的CSS中使用绝对路径(即列表中的第一个)。希望对你有帮助。
<style>
@font-face {
font-family: 'lane';
src: url('type/lanehum-webfont.eot');
src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'),
url('type/lanehum-webfont.woff') format('woff'),
url('type/lanehum-webfont.ttf') format('truetype'),
url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.font { font-family:"lane", arial, serif; }
</style>
您想要这样做:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
字体定义文件必须是相对于css文件的。所以如果你的css是:
/Content/css/main.css
那么你的字体必须位于同一文件夹中。如果指定
@font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }
那么你的字体定义将在
/Content/css/fonts/Delicious-Roman.otf
您可能想要验证您的服务器没有阻止下载您的字体。尝试URL，看看在给定的URL上是否得到404或403。
您应该尝试一下fontSuirrel的生成器，他们的脚本已经经过了大量的测试，并且与许多浏览器兼容。在生成字体时选择高级设置。某些浏览器可能无法使用ttf作为字体，所以他们为您提供eot woff和ttf
我从评论中得到的建议:
Try with quotes:
url("Univers.ttf");
检查您是否有font-family，否则您不能在代码中使用您的字体:
font-family: "MyFontName";
您将在css中使用的自定义字体系列，如:
p { font-family: "MyFontName", Arial, sans-serif; }
首先，感谢大家的大力帮助!@font-face代码没有问题。问题出在我的整体CSS上。你看，我的CSS是这样写的:
/*
Info
*/
@media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }
@font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
etc.
问题是@font-face没有被看到，因为它在@media screen之后!在我把它放在@media screen和/* Info */前面之后，它工作得完美无缺。
同时，似乎我可以使用绝对和相对路径时使用Wordpress…
再次感谢你们所有人的帮助!