@font-face 即使在尝试了我能想到的一切之后也不起作用

Question

我真的需要 @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 { 字体系列：'车道'； 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') 格式('embedded-opentype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') 格式('woff'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') 格式('truetype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') 格式('svg'); 字体粗细：正常； 字体样式：正常； }

h1{ 字体大小：110px; 字体系列：“lane”、乔治亚州、衬线体； 颜色：#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，看看在给定的 url 处是否收到 404 或 403。

Answer 3

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

Answer 4

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

尝试使用引号：

url("Univers.ttf");

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

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 时可以使用绝对路径和相对路径...

再次感谢大家的帮助！