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 font-files。

如果没有看到更多代码（也许是指向您网站的实时版本的链接），我无法为您提供更多帮助。

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

尝试以下方法：

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

Answer 2

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

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

最后，FireFox和IE的版本不允许跨域加载字体。您可能需要修改Apache配置或.htaccess（Header set Access-Control-Allow-Origin“*”）

Answer 3

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

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

我希望这可以帮助别人！

Answer 4

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

File name extension: .woff
MIME type: application/font-woff

Answer 5

通过使用..运算符，您已经复制了文件夹路径 - 并且会得到类似这样的内容：/wp-content/themes/wp-content/themes/twentysixteen/fonts/。

使用浏览器中的控制台查看此错误。

Answer 6

不确定您的问题究竟是什么，但请尝试以下方法：

字体文件是否存在？
您是否需要围绕网址引用？
您使用的是CSS3-enabled browser吗？

Check here例如，如果它们不适合您，那么您还有其他问题

修改

你的源代码中有很多重复的声明，这有用吗？

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

Answer 7

我正在为一个阿拉伯语客户端开发，并且在使用字体生成器创建我的字体之后也遇到了这样的问题。我生成的所有字体都没有工作。

事实证明，＆＃34;高级选项中有一个设置＆＃34;我需要选择哪个不仅使用西方语言字形（预先选择的选项）的发明者。

删除此子集后，我的字体将使用阿拉伯字符。我希望这可以帮助其他人担任这个职位。

干杯

Answer 8

您需要将字体文件名/路径放在引号中例如

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

或

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

而不是

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

此外@FONT-FACE仅适用于某些字体文件。：O（

您可以下载字体的所有网站，不要说哪些字体有效，哪些字体无效。

Answer 9

这可能是由于CORS （或未引用路径）引起的，并且是预期的行为。我知道这听起来令人困惑，但原因是字体的来源而不是网页本身。

可以在以下位置找到有关多种语言的Apache，NGINX，IIS或PHP的良好解释和众多解决方案：

https://www.hirehop.com/blog/cross-domain-fonts-cors-font-face-issue/

Answer 10

就我而言，问题在于字体文件本身。所有的字体文件突然不再工作（似乎坏了）。这是一个 Electron 应用。

最初一切正常，我没有更改与字体相关的任何内容，只是将我的代码推送到 repo。但是字体对我的队友不起作用，在我拉动她的更改后，它对我也不起作用。

就我而言，解决方案很简单：我把所有的字体文件都删除了，然后把原来的文件重新放进去，然后一切又恢复了。

希望这能帮助那些和我有类似问题的人。

Answer 11

我也面临着这种类型的问题。在尝试了所有解决方案之后，我得到了解决这个问此类问题的原因是每个定义的全局字体。对 @ font-face 中的每一行使用 ！important 关键字是此问题的解决方案。

此问题的解决方案的完整说明和示例如下： - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 12

尝试将html放在head标签下面。它对我有用。

 <title>ABC</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

@ font-face无效

12 个答案: