Question

我已经使用Font Squirrel创建了@ font-face css规则和所有字体格式，并且在我到目前为止测试的所有浏览器上都能正常工作，但在IE7上却没有。字体似乎根本没有加载。

您可以在http://grupogamma.socialsnack.com/

看到该网站

@ font-face规则位于http://grupogamma.socialsnack.com/wp-content/themes/gamma/style.css，字体位于http://grupogamma.socialsnack.com/fonts/

由Font Squirrel生成的我的css片段：

@font-face {
    font-family: 'UniversCondensedLight';
    src: url('/fonts/univers-condensedlight-webfont.eot');
    src: url('/fonts/univers-condensedlight-webfont.eot?#iefix') format('eot'),
         url('/fonts/univers-condensedlight-webfont.woff') format('woff'),
         url('/fonts/univers-condensedlight-webfont.ttf') format('truetype'),
         url('/fonts/univers-condensedlight-webfont.svg#webfonteM3WTEhs') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'UniversCondensed';
    src: url('/fonts/univers-condensed-webfont.eot');
    src: url('/fonts/univers-condensed-webfont.eot?#iefix') format('eot'),
         url('/fonts/univers-condensed-webfont.woff') format('woff'),
         url('/fonts/univers-condensed-webfont.ttf') format('truetype'),
         url('/fonts/univers-condensed-webfont.svg#webfontPDfnu2z9') format('svg');
    font-weight: normal;
    font-style: normal;

}

修改

通过使用Wireshark，我能够验证字体.eot确实已加载，并返回200 OK。 content-type是application / vnd.ms-fontobject。所以加载了字体，但是没有使用/没有正确呈现。

Answer 1

似乎我的CSS中还有其他东西让IE7表现得很糟糕（震惊！）

谢天谢地，用一些神奇的仙尘（zoom：1）解决了这个问题。

Answer 2

这种方法我刚刚使用过IE7和IE8。而且，与“多浏览器”声明它的方式相比，IE7的字体表单声明是不同的，但更简单。这是我的例子。我在“fonts”文件夹中添加了字体，因此您可以在代码中看到一些“fonts / ..”。

/* declaration of custom fontfaces */
/* first set of declaration fixes IE < v.9 issue */
@font-face { 
             font-family:"Open Sans Light";
             src:url("fonts/OpenSans-Light.eot?");
           }

/* if your browser is one of the latest ones, then it will recognize the code 
   below and will redeclare the font faces. 
   Since IE 7 and 8 do not recognize these declarations, 
   they will just bypass them. */
@font-face { 
             font-family:"Open Sans Light";
             src:url("fonts/OpenSans-Light.eot?") format("eot"),
                url("fonts/OpenSans-Light.woff") format("woff"),
                url("fonts/OpenSans-Light.ttf") format("truetype"),
                url("fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
             font-weight:normal;font-style:normal; 
           }

Answer 3

小孩们说，我很确定这是一个简单的问题，“IE7不会这样做”。 Sitepoint在@font-face上的引用位于http://reference.sitepoint.com/css/at-fontface，表示IE仅通过@font-face支持某些字体格式。

Answer 4

我发现我需要在IIS中添加mime类型的文件扩展名，如下所示 http://technet.microsoft.com/en-us/library/bb742440.aspx

@ font-face被IE7忽略

4 个答案: