1

我真的需要@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

4

5 回答 5

2

你使用正确吗？这是@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>
于 2011-11-13T22:40:40.953 回答
1

你想做这样的事情：

@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。

于 2011-11-13T22:39:41.977 回答
1

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

于 2011-11-13T22:41:55.790 回答
0

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

尝试使用引号：

url("Univers.ttf");

检查你有字体系列，否则你不能在你的代码中使用你的字体：

font-family: "MyFontName";

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

p { font-family: "MyFontName", Arial, sans-serif; }
于 2011-11-13T22:46:28.860 回答
0

首先，感谢大家的大力帮助！代码没有问题@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 时使用绝对路径和相对路径......

再次感谢大家的帮助！

于 2011-11-14T09:05:29.570 回答