CSS @font-face 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9897306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face not working
提问by user1217380
Don't know why but font is not displaying.Please help.
不知道为什么，但字体不显示。请帮忙。
CSS(in css folder): style.css:
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;
}
采纳答案by Rvervuurt
Double period (..) means you go up one folder and then look for the folder behind the slash. For example:
双句点 (..) 表示您上一个文件夹，然后查找斜杠后面的文件夹。例如：
If your index.html is in the folder html/filesand the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in htmland your fonts in html/fonts, then you should use only one period.
如果您的 index.html 在文件夹中html/files并且字体在 中html/fonts，则 .. 很好（因为您必须返回一个文件夹才能转到/fonts）。你的 index.htmlhtml和你的字体是html/fonts，那么你应该只使用一个句点。
Another problem could be that your browser might not support .eot font-files.
另一个问题可能是您的浏览器可能不支持 .eot 字体文件。
Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.
如果没有看到您的更多代码（也许还有指向您网站实时版本的链接），我真的无法为您提供进一步的帮助。
Edit: Forget the .eot part, I missed the .ttf file in your css.
编辑：忘记 .eot 部分，我错过了 css 中的 .ttf 文件。
Try the following:
请尝试以下操作：
@font-face {
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf);
}
回答by Tricky
I was having this same issue and I thought I'd share my solution as I didn't see anyone address this problem specifically.
我遇到了同样的问题，我想我会分享我的解决方案，因为我没有看到有人专门解决这个问题。
The problem was I wasn't using the correct path. My CSS looked like this:
问题是我没有使用正确的路径。我的 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;
The problem with the path is that I am referring to the font from my CSS file, which is in my CSS folder. I needed to come up a level first, then into the fonts folder.This is what it looks like now, and works great.
路径的问题是我指的是我的 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;
I hope this helps someone out!
我希望这可以帮助别人！
回答by Malcolm Boyanton
Using font-face requires a little understanding of browser inconsistencies and may require some changes on the web server itself. First thing you have to do is check the console to see if/what messages are being generated. Is it a permissions issue or resource not found....?
使用 font-face 需要对浏览器的不一致有一点了解，并且可能需要对 Web 服务器本身进行一些更改。您要做的第一件事是检查控制台以查看是否/正在生成什么消息。是权限问题还是找不到资源....？
Secondly because each browser is expecting a different font type I would use Font Squirrel to upload your font and then generate the additional files and CSS needed. http://www.fontsquirrel.com/fontface/generator
其次，因为每个浏览器都需要不同的字体类型，所以我会使用 Font Squirrel 上传您的字体，然后生成所需的其他文件和 CSS。http://www.fontsquirrel.com/fontface/generator
And finally, versions of FireFox and IE will not allow fonts to be loaded cross domain. You may need to modify your Apache config or .htaccess (Header set Access-Control-Allow-Origin "*")
最后，FireFox 和 IE 版本将不允许跨域加载字体。您可能需要修改您的 Apache 配置或 .htaccess（标头集 Access-Control-Allow-Origin "*"）
回答by Jean Libera
I had this problem recently and the problem was that my web server was not configured to serve woff files. For IIS 7, you can select your site, then select the MIME Types icon. If .woff is not in the list, you need to add it. The correct values are
我最近遇到了这个问题，问题是我的 Web 服务器没有配置为提供 woff 文件。对于 IIS 7，您可以选择您的站点，然后选择 MIME 类型图标。如果 .woff 不在列表中，则需要添加它。正确的值是
File name extension: .woff
MIME type: application/font-woff
回答by Eric Godoy
By using the .. operator, you've have duplicated the folder path - and will get something like this : /wp-content/themes/wp-content/themes/twentysixteen/fonts/.
通过使用..运算符，你有重复的文件夹路径-并会得到这样的：/wp-content/themes/wp-content/themes/twentysixteen/fonts/。
Use the console in your browser to see for this error.
使用浏览器中的控制台查看此错误。
回答by Mark Antony Agius
You need to put the font file name / path in quotes.
Eg.
您需要将字体文件名/路径放在引号中。
例如。
url("../fonts/Gotham-Medium.ttf")
or
或者
url('../fonts/Gotham-Medium.ttf')
and not
并不是
url(../fonts/Gotham-Medium.ttf)
Also @FONT-FACEonly works with some font files. :o(
也@FONT-FACE仅适用于某些字体文件。:o(
All the sites where you can download fonts, never say which fonts work and which ones don't.
所有可以下载字体的网站，永远不要说哪些字体有效，哪些无效。
回答by CDK
I was developing for an Arabic client, and had an issue like this as well, after using a font generator to create my fonts. None of the fonts I was generating were working.
我正在为阿拉伯客户开发，在使用字体生成器创建我的字体后也遇到了这样的问题。我生成的字体都没有工作。
It turns out that there was a setting in the "Advanced options" of the genrator which I needed to select which would not only use a the Western language glyphs (a pre-selected option).
事实证明，在生成器的“高级选项”中有一个设置，我需要选择它不仅会使用西方语言字形（预选选项）。
After removing this subset, my fonts then worked with the Arabic characters. I hope this may help someone else in this position.
删除这个子集后，我的字体就可以处理阿拉伯字符了。我希望这可以帮助处于这个位置的其他人。
Cheers
干杯
回答by Terry
Not sure exactly what your problem is, but try the following:
不确定您的问题到底是什么，但请尝试以下操作：
- Do the font files exist?
- Do you need quotes around the URLs?
- Are you using a CSS3-enabled browser?
- 字体文件是否存在？
- 你需要在 URL 周围加引号吗？
- 您使用的是支持CSS3 的浏览器吗？
Check herefor examples, if they don't work for you then you have another problem
在此处查看示例，如果它们对您不起作用，那么您还有另一个问题
Edit:
编辑：
You have a bunch of repeated declarations in your source, does this work?
你的源代码中有一堆重复的声明，这行得通吗？
@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); }
a { font-family:Gotham,Verdana,Arial; }
回答by Ganesh Garad
I'm also facing this type of problem. After trying all solutions I got final solution on this problem. Reasons for this type of problem is per-defined global fonts. Use !importantkeyword for each line in @font-faceis the solution for this problem.
我也面临这种类型的问题。在尝试了所有解决方案后，我得到了这个问题的最终解决方案。此类问题的原因是每个定义的全局字体。对@font-face中的每一行使用!important关键字是解决此问题的方法。
Full description and example for Solution of this problem is here :- http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
此问题的解决方案的完整描述和示例如下：- http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
回答by radha gupta
try to put below html in head tag.It worked for me.
尝试将下面的 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">
