@ font-face不工作

不知道为什么，但字体不显示。请帮助。@ font-face不工作

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

来源

2012-03-27 user1217380

检查资源选项卡中检查/萤火虫，以确保您的字体是否被正确加载。 – 2012-03-27 20:38:18

当然，希望你对该字体有适当的权利，它看起来像@ font-face不被代工厂支持：http://www.typography.com/ask/faq.php?path=head#Ft_10 – 2012-03-27 20:53:47

只是一个建议：检查谷歌Web字体（[google.com/webfonts](http://google.com/webfonts））你可以直接链接到这些从CSS或元标记 – pep 2012-03-27 20:40:36

双句点（..）表示您上去一个文件夹，然后查找斜杠后面的文件夹。例如：

如果您的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); 
}

来源

2012-03-27 20:40:56 Rvervuurt

不知道你到底是什么问题，但请尝试以下操作：

不要将字体文件存在吗？
你需要围绕网址引号吗？
你使用的是CSS3-enabled browser？

Check here举例来说，如果他们不为你工作，那么你有一个问题

编辑：

你有一堆重复的声明中源，工作的呢？

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

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

来源

2012-03-27 20:40:12 Terry

不，不工作.. – user1217380 2012-03-27 20:53:00

使用字体面需要浏览器不一致的一点理解，并且可能需要在Web服务器本身的一些变化。你必须做的第一件事是检查控制台，看看是否生成了什么消息。它是一个权限问题或资源未找到....？

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

最后，FireFox和IE的版本不允许跨域加载字体。您可能需要修改您的Apache配置或.htaccess（标头设置访问控制允许来源“*”）

来源

2012-03-27 20:59:59

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

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

来源

2013-12-22 16:36:56

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

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

我希望这可以帮助别人！

来源

2015-07-14 22:21:27 Tricky

通过使用..运算符，您已经复制了文件夹路径 - 并将得到如下所示的内容：/wp-content/themes/wp-content/themes/twentysixteen/fonts/。

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

来源

2016-08-15 11:49:32

-1

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

全面介绍和例子是在这里： - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

来源

2017-06-06 18:13:54

-2

试图把下面的HTML头tag.It为我工作。

<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">

来源

2017-06-22 11:43:17

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

事实证明，我需要选择哪个不仅使用西方语言字形（预先选择的选项）的生成器的“高级选项”中有一个设置。

删除此子集后，我的字体随后与阿拉伯字符一起工作。我希望这可以帮助其他人在这个位置。

干杯

来源

2017-07-20 10:17:16 CDK

你需要把字体文件名/路径在引号。例如：
例如。

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

或

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

，而不是

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

而且@FONT-FACE只适用于一些字体文件。：O（

所有的网站，你可以下载字体，从来不说这字型工作，哪些没有

来源

2017-08-19 14:10:12

@ font-face不工作

回答

相关问题