自定义Web字体在IE9不工作 [英] Custom web font not working in IE9
问题描述
我下载了一个自定义的字体（谭-Light.eot ），但它不能在Internet Explorer 9的工作。
@字体面{
FONT-FAMILY：谭光强;
SRC：URL（世界街头-Light.eot'）;
}
这是行不通的。我使用ASP MVC3重修，使用自定义工具，仍然一无所获。
首先，商品：
@字体面{
FONT-FAMILY：'ludger_duvernayregular';
SRC：URL（'HTTP：//jf$c$cr.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot'）;
SRC：URL（'HTTP：//jf$c$cr.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot #iefix'）格式（嵌入式OpenType字体），
URL（'HTTP：//jf$c$cr.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff'）格式（WOFF），
URL（'HTTP：//jf$c$cr.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf'）格式（TrueType字体），
url('http://jf$c$cr.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular')格式（'SVG'）;
字体重量：正常;
字体风格：正常;
}p.test {
FONT-FAMILY：'ludger_duvernayregular'，宋体，衬线;
字体重量：400;
颜色：蓝色;
}
请注意，我用的字型，这是故意容易看到的工作。 （我没有在一个Web字体访问谭，所以......我甚至不知道世界街头被授权在Web字体的形式来使用。如果你没有许可证或许可证不允许它，请尊重这一点。的），所以你必须做对路径的字体文件小算盘。
我所做的是咨询博客文章AlienWebGuy链接到，这是很好的。它的时间不长，所以我会读它。它归结为：
- 可能错误配置的MIME类型的字体文件。请参阅下面的更多信息。还有一个需要注意的是Apache可能有这个问题，这似乎是更大的IIS问题（根据文章）。
- 您可以欺骗（？）IE9使用EOT文件而不是WOFF，这显然修复该问题（根据文章）。
此外，和顺便说一句，IE9曾与的jsfiddle演示显示字体有问题的使用完全相同的CSS 的。很奇怪。 IE7和8个工作得很好，所以我知道它在某些方面的工作。我也没弄明白什么是什么，但我救了相同的标记和CSS来我的网站上的文件，它工作正常。
的击穿... 的
让我解释一下这是怎么回事在上面的CSS。我会去通过每个行。但是，请记住我在下列文件格式的Web字体：
- EOT
- WOFF
- TTF
- SVG
您真的可能只需要 EOT ， TTF 和 WOFF 如果你不关心支持传统的iOS。 SVG的翻译很难获得，虽然。
现在，第一个命名您的字体，所以你可以参考它：
FONT-FAMILY：'ludger_duvernayregular';
IE9 COMPAT方式：
SRC：URL（'HTTP：//jf$c$cr.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot'）;
记住的确认你正在使用这里的URL实际上导致真正的文件的。把它放在地址栏，看看会发生什么（是否下载？404？）。
在下面，不过，我要删除的完整URL，所以你可以看到整个语句，包括结束。
IE6，7和8：
SRC：URL（'HTTP：//../ludgerduvernay.eot #iefix'）格式（嵌入式OpenType字体），
请注意这部分：
.eot #iefix＆LT;＆LT;＆LT;参考下面的解释。
另外IE的CSS修复的
在某些罕见的情况下，IE将失败，因为的@ font-face声明
有太多的字符的。这可以在由大多数情况下得到解决
的'？'问号后面加上一个＃井号的。这给你买一个
额外的空间位。<子>的 - 从字体春文章的
我不知道为什么这个作品，所以我带他们的话。
现代浏览器：
的url（'HTTP：//../ludgerduvernay.woff'）格式（WOFF），Safari浏览器，Android版，iOS版：
的url（'HTTP：//../ludgerduvernay.ttf'）格式（TrueType字体），旧的iOS：
的url（'HTTP：//../ludgerduvernay.svg#ludger_duvernayregular'）格式（'SVG'）;然后使用它：
p {
FONT-FAMILY：'ludger_duvernayregular'，宋体，衬线;
}实际上，我是惊讶这部作品回到IE6。不管怎么说，请注意我用一个完整的文件路径，而不是相对的。这通常是开始的好地方; 的检查，以确保链接下载的。我在做这方面的一个大问题，因为它是基本的和容易搞砸了。
因此，如果该文件的URL下载，你已经有了在其他浏览器中工作，而在IE6，7和/或8，你可以看看另一种可能性：
在服务器端修复IE9（IIS）
微软的IIS服务器将拒绝发送它没有资源
有一个MIME类型。我们开发的语法迫使IE9取
WOFF在EOT，但如果是在IIS服务，它就会失败。这是
因为IE9要求WOFF文件，但由于WOFF是不是一个定义
在IIS MIME类型，则返回一个404 Not Found错误。为了解决这个问题，
你必须添加'.woffMIME类型应用程序/ x-字体WOFF'到您
IIS的安装。<子>的 - 从字体春文章的
所以，你可能要检查你的服务器是不是borking它。您还可以使用Chrome的控制台或Firebug的Net选项卡来查看与该文件发送的头。
现在我有一点点帮助在这里，我想你应该考虑以下选项：
- 的谷歌的Web字体 。不要成为一个英雄。他们举办的字体，给你包括样式表标记，preSTO whammo，你在生意。他们也有一些pretty酷字体。有其他Web字体服务，如Typekit，Webtype，Fontdeck和字体现场。
- 的字体松鼠拥有的 @字体面发生器 ，它可以给你你需要的所有文件（警告：只有您提交的
知道被许可网页使用的 ）。使用专家模式，它会给你有很多伟大的东西，其中包括演示的ZIP文件。一个我收到你可以在这里下载。有趣的是，生成CSS是相同的字体春天之一，减去的意见。这可能不是巧合。- 我发现 这真棒工具这部歌剧开发页 。这也是值得一读。
- 当然，这博客文章AlienWebGuy挂的位于字体春
这东西并不难，但你需要知道如何解决。经常检查该文件下载;你可以使用Chrome的控制台资源标签或Firefox的Firebug插件，看Net标签，看它是否下载。它只是如果硬是将无法正常工作，张贴页面或code的地方，我们可以得到它，我们可以查看它。
的编码愉快。
：）的在演示中使用的超爽赫然字体为卢德格尔迪韦奈常规即可。欲了解更多信息，请参见史蒂夫克卢捷/ Cloutierfontes 网站。感谢您使之成为免费供个人使用。
：）I downloaded a custom font (
Gotham-Light.eot), but it doesn't work on Internet Explorer 9.@font-face { font-family: Gotham-Light; src: url('Gotham-Light.eot'); }This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.
解决方案First, the goods:
@font-face { font-family: 'ludger_duvernayregular'; src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot'); src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'), url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'), url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'), url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg'); font-weight: normal; font-style: normal; } p.test { font-family: 'ludger_duvernayregular', Arial, serif; font-weight: 400; color: blue; }Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.
What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:
- Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
- You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).
Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.
Breakdown...
Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:
- eot
- woff
- ttf
- svg
You really probably only need
eot,ttfandwoffif you don't care to support legacy iOS. SVG translations are hard to obtain, though.Now, first name your font so you can reference it:
font-family: 'ludger_duvernayregular';IE9 Compat Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).
On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),Note this part:
.eot?#iefix <<< See below for an explanation.
Further IE CSS Fix
In some rare cases, IE will fail because the @font-face declaration has too many characters. This can be solved in most instances by adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a bit of extra room.
- From the Font Spring article
I have no idea why this works, so I'm taking their word for it.
Modern Browsers:
url('http://../ludgerduvernay.woff') format('woff'),Safari, Android, iOS:
url('http://../ludgerduvernay.ttf') format('truetype'),Legacy iOS:
url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');Then use it:
p { font-family: 'ludger_duvernayregular', Arial, serif; }I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.
So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:
Fix IE9 on the Server Side (IIS)
Microsoft’s IIS server will refuse to send resources that it does not have a MIME type for. The syntax we developed forces IE9 to take the WOFF over the EOT, but if it is served on IIS, it will fail. This is because IE9 requests the WOFF file, but since WOFF is not a defined MIME type in IIS, a 404 Not Found error is returned. To solve this, you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your IIS installation.
- From the Font Spring article
So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.
Now I had a little help here, and I think you should think about the following options:
- Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
- Font Squirrel has a @Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
- I found that awesome tool on this Opera Dev page. That is also worth reading.
- And of course, that blog post AlienWebGuy linked to at Font Spring.
This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.
Happy coding.
:)
The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use.
:)这篇关于自定义Web字体在IE9不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
