@font-face 不工作

Question

不知道为什么，但没有显示字体。请帮忙。

CSS（在 css 文件夹中）： style.css：

 @font-face {
 font-family: Gotham;
 src: url(../fonts/gothammedium.eot);
 src: local('Gotham-Medium'),
 url(../fonts/Gotham-Medium.ttf) format('truetype');
}

a {
 font-family:Gotham,Verdana,Arial;
}

原文由 user1217380 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

双句点 (..) 表示您向上一个文件夹，然后查找斜线后面的文件夹。例如：

如果您的 index.html 位于文件夹 html/files 并且字体位于 html/fonts 中，则 .. 很好（因为您必须返回一个文件夹才能转到 /fonts )。你的 index.html 是 html 而你的字体是 html/fonts ，那么你应该只使用一个句点。

另一个问题可能是您的浏览器可能不支持 .eot 字体文件。

如果没有看到更多您的代码（可能还有指向您网站的实时版本的链接），我真的无法为您提供进一步的帮助。

编辑：忘记 .eot 部分，我错过了你的 css 中的 .ttf 文件。

尝试以下操作：

 @font-face {
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf);
}

原文由 Rvervuurt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我遇到了同样的问题，我想我会分享我的解决方案，因为我没有看到任何人专门解决这个问题。

问题是我没有使用正确的路径。我的 CSS 看起来像这样：

 @font-face {
font-family: 'sonhoregular';
src: url('fonts/vtkssonho-webfont.eot');
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
     url('fonts/vtkssonho-webfont.woff2') format('woff2'),
     url('fonts/vtkssonho-webfont.woff') format('woff'),
     url('fonts/vtkssonho-webfont.ttf') format('truetype'),
     url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;

路径的问题是我指的是我的 CSS 文件中的字体，它位于我的 CSS 文件夹中。我需要先上一个级别，然后再进入字体文件夹。 这就是它现在的样子，而且效果很好。

 @font-face {
font-family: 'sonhoregular';
src: url('../fonts/vtkssonho-webfont.eot');
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
     url('../fonts/vtkssonho-webfont.woff2') format('woff2'),
     url('../fonts/vtkssonho-webfont.woff') format('woff'),
     url('../fonts/vtkssonho-webfont.ttf') format('truetype'),
     url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;

我希望这可以帮助别人！

原文由 Tricky 发布，翻译遵循 CC BY-SA 3.0 许可协议