css – IE8中字体回退中使用的Webfonts

我目前正在尝试在我构建的网站上实现webfonts,我想将其用作font-family属性中的后备,即如果该字符未在Arial / Helvetica中表示,那么它应该在使用的webfont中.

我意识到这在IE6和7中不起作用,但是期望它在IE8中工作,它似乎也没有.

我只是想知道是否有人曾经遇到过这个问题的经验,如果在IE8中使用webfont作为后备字体是可能的,或者如果有人只能看到我在代码中做错了.

在此先感谢您的帮助

这是我的css代码：

@font-face {
    font-family: 'stix';
    src: url('/webfonts/webfont.eot');
    src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold-webfont.eot');
    src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/talic-webfont.eot');
    src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold_italic-webfont.eot');
    src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
    font-weight: bold;
    font-style: italic;

}

body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }

我正在使用你的代码的精简版本(仅为了清晰起见 – 它没有任何问题)和在许多浏览器中进行测试(webfont是STIX,就像你一样,不是我知道如果这个一个角色),我看到一些奇怪的行为：大多数浏览器中的字体回退确实有效,但只有当排除所有斜体字体变体时(无论是斜体还是粗体).

即这是有效的(100％的时间),浏览器回退到STIX的那些字符不在arial中：

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralbol-webfont.eot');
    font-weight: bold;
    font-style: normal;
}
body {font-family: arial, stix, sans-serif;}

…但是这在100％的时间内都不起作用(尽管有时会显示字符！)：

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
    font-weight: normal;
    font-style: italic;
}
body {font-family: arial, stix, sans-serif;}

原因似乎是STIX字体包有错误.

为了解决这个问题,请在FontForge中打开您的STIX字体包并保存 – FontForge将通知您错误.修复这些,然后导入FontSquirrel.字体后备应该现在可以正常工作.