@ 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; 
}

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); 
}

Answer 2

另一件要检查的事情是：

对于.otf字体文件，请使用format('opentype')NOTformat('otf')

例如使用：

@font-face { 
 font-family: Gotham;
 src: url(../fonts/Gotham-Medium.otf) format('opentype'); 
} 

对我来说，这是 GitHub Copilot 的建议正确率达到 95% 的情况，但错误地使用了format('otf')，这导致我花了一个小时对此进行调试。

Answer 3

使用font-face需要稍微了解浏览器的不一致性,并且可能需要对Web服务器本身进行一些更改.您要做的第一件事是检查控制台以查看是否正在生成消息.它是一个权限问题或资源未找到....？

其次,因为每个浏览器都期望不同的字体类型,我会使用Font Squirrel上传您的字体,然后生成所需的其他文件和CSS.http://www.fontsquirrel.com/fontface/generator

最后,FireFox和IE的版本将不允许跨域加载字体.您可能需要修改Apache配置或.htaccess(Header set Access-Control-Allow-Origin"*")

Answer 4

我遇到了同样的问题,我想我会分享我的解决方案,因为我没有看到有人特别解决这个问题.

问题是我没有使用正确的路径.我的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文件夹中.我需要先上一级,然后进入fonts文件夹. 这就是它现在的样子,效果很好.

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

我希望这可以帮助别人!