logo标签列表

@font-face不起作用

css
46

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

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; 
}
5
请在检查器/火狐浏览器的资源选项卡中检查您的字体是否正确加载。 - Christopher Marshall
只是一个建议：请查看Google Web字体（google.com/webfonts）。您可以从CSS或元标记直接链接到这些字体。 - pep
1
希望你有合适的字体使用权，因为这个字体似乎还没有被字体公司支持：http://www.typography.com/ask/faq.php?path=head#Ft_10 - Mark Ransom
我也遇到了同样的问题，我正在开发 Cordova 应用程序，其中使用了 me_quran 字体系列，但在移动应用程序中无法使用。为什么？请帮帮我。我的问题 - Eann
13个回答
39
双点号 (..) 表示你要向上一层文件夹，然后在斜线后面查找文件夹。例如：如果您的index.html位于html/files文件夹中，而字体位于html/fonts文件夹中，则使用".."是可以的(因为您必须返回到上一层文件夹才能进入/fonts文件夹)。如果您的 index.html 在 html 文件夹中，而字体在 html/fonts 文件夹中，则应该只使用一个句点。无法看到更多代码（可能是您网站的实时版本链接）之前，我无法提供更进一步的帮助。编辑：忘记了 .eot 部分，我错过了您的 css 中的 .ttf 文件。请尝试以下操作:
@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}
22

我曾经遇到过同样的问题，我想分享我的解决方案，因为我没有看到有人专门解决这个问题。

问题是我没有使用正确的路径。我的 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;

我希望这可以帮助某人！

14

另一件需要检查的事情：

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

例如使用：

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

对我而言，这是GitHub Copilot的建议准确率达到95%，但错误地使用了format('otf')，导致我花费了一个小时来调试。

1
完全相同的问题！Copilot添加了“otf”而不是“opentype”，我完全忽略了它。感谢您提供如此好的答案，我都快抓狂了！ - Aaron Meese
供日后参考：这在Chromium上对我有效。 - Aamir
9
使用font-face需要一些对浏览器不一致性的理解，并且可能需要对Web服务器本身进行一些更改。首先，您必须检查控制台以查看是否/生成了哪些消息。这是权限问题还是资源未找到...？
其次，由于每个浏览器都期望不同的字体类型，我建议使用Font Squirrel上传字体，然后生成所需的其他文件和CSS。http://www.fontsquirrel.com/fontface/generator 最后，FireFox和IE的某些版本将不允许跨域加载字体。您可能需要修改Apache配置或.htaccess（Header set Access-Control-Allow-Origin“*”）。
4

您需要将字体文件名/路径用引号括起来。
例如：

url("../fonts/Gotham-Medium.ttf")

或者

url('../fonts/Gotham-Medium.ttf')

而不是

url(../fonts/Gotham-Medium.ttf)

另外，@FONT-FACE 仅适用于某些字体文件。 :o(

你可以下载字体的所有网站都没有说明哪些字体适用，哪些不适用。

4

最近我遇到了一个问题，问题是我的web服务器没有配置为提供woff文件。对于IIS 7，您可以选择您的站点，然后选择MIME类型图标。如果.woff不在列表中，则需要添加它。正确的值是：

File name extension: .woff
MIME type: application/font-woff
1
我曾为一位阿拉伯客户开发，并且使用字体生成器创建我的字体时遇到了这样的问题。我生成的所有字体都无法正常工作。
结果，在生成器的“高级选项”中，有一个设置需要选择，它不仅会使用西方语言字形（预先选定的选项），同时也需要取消勾选子集选项。
取消此子集后，我的字体就可以与阿拉伯字符一起使用了。希望这对其他人有所帮助。
干杯
1
通过使用 .. 操作符，您已经复制了文件夹路径 - 并将得到类似于以下内容：/wp-content/themes/wp-content/themes/twentysixteen/fonts/。 使用浏览器控制台查看此错误。
0

不确定您的问题是什么，但请尝试以下操作：

  1. 字体文件是否存在？
  2. URL周围是否需要引号？
  3. 您是否使用支持CSS3的浏览器？

在此处检查示例，如果它们对您无效，则可能存在其他问题

编辑：

您的源代码中有许多重复声明，这样做可以解决问题吗？

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

a { font-family:Gotham,Verdana,Arial; }
0
在我的情况下，问题出在字体文件本身。所有的字体文件突然都不能用了（似乎是损坏了）。 这是一个 Electron 应用程序。
最初一切正常，我没有改变任何与字体相关的东西，只是将我的代码推送到仓库中。但是字体对我的团队成员不起作用，在我拉取她的更改后，对我也不起作用了。
在我的情况下，解决方案非常简单： 我删除了所有的字体文件，重新放置原始文件，然后一切又恢复正常了。
希望这能帮助那些遇到类似问题的人。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接