Question

我真的需要@font-face代码的帮助。 IT似乎没有看到我的字体文件。

我尝试将路径更改为我能想到的任何内容，制作新文件夹，重命名现有文件夹，将字体文件放入我的根目录等。

我正在使用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中要改变什么来让它工作吗？

（我也在这里和网上的其他地方检查了类似的问题并尝试使用this网站无效。）

谢谢！

更新 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

Answer 1

你正确使用它吗？这是@ 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>

Answer 2

你想做这样的事情：

@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，看看你是否在给定网址上获得了404或403。

Answer 3

您应该尝试fontSuirrel's生成器，他们的脚本已经过大量测试，并且与许多浏览器兼容。生成字体时选择高级设置。某些浏览器可能无法将ttf用作字体，因此它们会为您提供eot woff和ttf

Answer 4

我在评论中的建议作为答案：

尝试使用引号：

url("Univers.ttf");

检查您是否有font-family，否则您无法在代码中使用您的字体：

font-family: "MyFontName";

您将在css中使用的自定义字体系列：

p { font-family: "MyFontName", Arial, sans-serif; }

Answer 5

首先，谢谢大家的帮助！ @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时似乎可以使用绝对路径和相对路径...

再次感谢大家的帮助！

@ font-face即使在尝试了我能想到的一切之后也无法工作

5 个答案: