asp.net – 自定义Web字体在IE9中不起作用

@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是否有权使用网络字体形式.如果您没有许可证或许可证不允许请尊重.)因此,您必须对字体文件的路径进行一些思考.

我所做的就是咨询blog post AlienWebGuy linked to,这很好.时间不长,所以我读了.归结为：

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

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

分解…

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

>很好
> woff
> ttf
> svg

如果你不关心支持传统的iOS,你真的可能只需要eot,ttf和woff.但是,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.

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.

– 来自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',serif;
}

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

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

修复服务器端的IE9(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.

– 来自Font Spring文章

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

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

> Google Web Fonts.不要成为英雄.他们托管字体,为您提供包含样式表标记,以及presto whammo,您正在开展业务.他们也有一些非常酷的字体.有other web font services,如Typekit,Webtype,Fontdeck和Fonts Live.
> Font Squirrel has a @Font-Face Generator,它可以为您提供所需的所有文件(警告：仅提交您知道的用于Web使用许可的字体.).使用专家模式,它将为您提供包含许多精彩内容的ZIP文件,包括演示.我收到你的那个可以在这里下载.有趣的是,生成的CSS与Font Spring一样,减去了注释.这可能不是巧合.
>我在this Opera Dev page找到了很棒的工具.这也值得一读.
>当然,在Font Spring的blog post AlienWebGuy linked to.

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

快乐的编码.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!