自定义Web字体在IE9中不起作用

Question

我下载了自定义字体(Gotham-Light.eot),但它在Internet Explorer 9上不起作用.

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

这不起作用.我正在使用ASP MVC3重建,使用自定义工具,仍然没有.

Answer 1

一,货物:

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

请注意,我使用的字体很容易被视为有效.(而且我无法使用网络字体访问Gotham,所以......我甚至不确定Gotham是否有权使用网络字体形式.如果您没有许可证或许可证不允许使用请尊重.)因此,您必须对字体文件的路径进行一些思考.

我所做的是咨询链接到AlienWebGuy的博客文章,这很好.时间不长,所以我读了.归结为:

1. 可能是字体文件的错误配置的MIME类型.有关详细信息,请参见下文 还有一个说明Apache可能有这个问题,它似乎更像是一个IIS问题(根据文章).
2. 你可以欺骗(？)IE9使用EOT文件而不是WOFF,这显然解决了问题(根据文章).

此外,另外,IE9 使用相同的CSS显示字体与jsFiddle演示 有问题.很奇怪.IE7和8工作正常,所以我知道它在某些方面有效.我没弄清楚那是什么,但我将相同的标记和CSS保存到我网站上的文件中,并且工作正常.

分解...

让我解释上面的CSS中发生了什么.我会通过每一行.但是,请记住我有以下文件格式的Web字体:

• EOT
• WOFF
• TTF
• SVG

你真的可能只需要eot,ttf而且woff如果你不关心支持传统的iOS.但是,SVG翻译很难获得.

现在,首先命名您的字体,以便您可以引用它:

font-family: 'ludger_duvernayregular';

IE9 Compat模式:

src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');

请记住验证您在此处使用的网址实际上是否会生成真实文件.把它放在地址栏中,看看会发生什么(下载了吗？404？).

但是,在下面,我将删除完整的URL,以便您可以看到整个语句,包括结尾.

IE6,7和8:

src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),

注意这部分:

.eot?#iefix <<< See below for an explanation.

进一步IE CSS修复

在极少数情况下,IE会失败,因为@ font-face声明的字符太多.在大多数情况下,可以通过在'？'之后添加'#'井号来解决这个问题. 问号.这会给你带来额外的空间.

_{- 来自Font Spring文章}

我不知道为什么会这样,所以我会接受他们的话.

现代浏览器:

url('http://../ludgerduvernay.woff') format('woff'),

Safari,Android,iOS:

url('http://../ludgerduvernay.ttf') format('truetype'),

传统iOS:

url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');

然后使用它:

p {
    font-family: 'ludger_duvernayregular', Arial, serif;
}

我真的很惊讶这回到了IE6.无论如何,请注意我使用文件的完整路径,而不是相对文件.这通常是一个好的开始; 检查以确保链接下载.我正在做大量的事情,因为它是基本的,容易搞砸.

因此,如果文件是使用url下载的,并且您已经在其他浏览器中工作,并且在IE6,7和/或8中,您可以查看另一种可能性:

修复服务器端的IE9(IIS)

Microsoft的IIS服务器将拒绝发送它没有MIME类型的资源.我们开发的语法强制IE9通过EOT获取WOFF,但如果它在IIS上提供,它将失败.这是因为IE9请求WOFF文件,但由于WOFF不是IIS中定义的MIME类型,因此返回404 Not Found错误.要解决此问题,必须将MIME类型为"application/x-font-woff"的".woff"添加到IIS安装中.

_{- 来自Font Spring文章}

因此,您可能需要检查您的服务器是否正在进行操作.您还可以使用Chrome控制台或Firebug NET标签查看随文件发送的标头.

现在我在这里得到了一些帮助,我认为你应该考虑以下几个方案:

1. Google Web字体.不要成为英雄.他们托管字体,为您提供包含样式表标记,以及presto whammo,您正在开展业务.他们也有一些非常酷的字体.还有其他Web字体服务,例如Typekit,Webtype,Fontdeck和Fonts Live.
2. Font Squirrel有一个@ Font-Face Generator,它可以为您提供所需的所有文件(警告:只提交您认为可以在网上使用的字体.).使用专家模式,它将为您提供包含许多精彩内容的ZIP文件,包括演示.我收到你的那个可以在这里下载.有趣的是,生成的CSS与Font Spring一样,减去了注释.这可能不是巧合.
3. 我在Opera Dev页面上找到了很棒的工具.这也值得一读.
4. 当然,该博客文章AlienWebGuy挂在字体春天.

这个东西并不难,但你需要知道如何排除故障.始终检查文件是否正在下载; 您可以使用Chrome控制台资源标签或Firefox的Firebug插件,并观看NET标签以查看是否下载.它只是字面上不起作用,将页面或代码发布到我们可以访问的地方,我们可以查看它.

快乐的编码. :)

演示中使用的超级酷炫字体是Ludger Duvernay Regular.有关更多信息,请参阅Steve Cloutier/Cloutierfontes网站.感谢您免费供个人使用.:)