IE9 仅字体问题（渲染后备字体）答案

【问题标题】：IE9 only font-face issue (rendering fallback font)IE9 仅字体问题（渲染后备字体）
【发布时间】：2014-06-13 11:15:43
【问题描述】：

该网站在 chrome 和最新版本的 ff 上运行良好。它似乎也可以正常工作并在 IE8 上显示正确的字体；但是在 IE9 中，它显示的是更粗的字体。

 @font-face{
    font-family: 'effraregular';
    src: url("http://www.xxxx.com.au/assets/effra_std_rg-webfont.eot");
    src: url("http://www.xxxx.com.au/assets/effra_std_rg-webfont.eot?#iefix") format('embedded-opentype'),
    url("http://www.xxxx.com.au/assets/effra_std_rg-webfont.woff") format('woff'),
    url("http://www.xxxx.com.au/assets/effra_std_rg-webfont.ttf") format('truetype'),
    url("http://www.xxxx.com.au/assets/effra_std_rg-webfont.svg#effraregular") format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'effralight';
    src: url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.eot");
    src: url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.eot?#iefix") format('embedded-opentype'),
    url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.woff") format('woff'),
    url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.ttf") format('truetype'),
    url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.svg#effralight") format('svg');
    font-weight: normal;
    font-style: normal;
}

根据另一个问题，似乎解决方法是将格式从eot更改为embedded-opentype，但是正如您所见，这已经完成了。

文档中使用的字体系列：

font-family 'effralight','effraregular' 似乎在 IE9 中，它使用的是后备字体 effraregular（如果我通过编辑 effraregular 将其删除，则默认为 times new roman 或类似的字体）。

文档类型： <!DOCTYPE html SYSTEM "about:legacy-compat">

【问题讨论】：

缺少基本信息：HTML 和 CSS 代码、字体来源、用于访问字体的真实地址等。
嘿，我似乎无法让它在 FF/Chrome 上工作~检查这个fiddle

标签： html css internet-explorer fonts internet-explorer-9

【解决方案1】：

尝试将meta 标记添加到您的HTML 中作为快速解决方法，这将告诉IE9 模拟IE8，恢复原始渲染。或more information on same

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 在你的部分。

但有了这个，您必须与其他 IE9 功能妥协，例如更好的 HTML5 和 CSS3 支持。

通常，当您告诉IE9 将字体呈现为bold 时，所需的切换将发生在800 和900 的font-weights 上。

或使用

font-family: 'effralight';
    src: url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.eot");
    src: url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.eot?#iefix") format('embedded-opentype'),
    url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.woff") format('woff'),
    url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.ttf") format('truetype'),
    url("http://www.xxxx.com.au/images/assetimages/fonts/effra_light-webfont.svg#effralight") format('svg');
font-size: 0.75em;  
font-weight: 700;

即使使用 nomalize.css 也可能对您有所帮助

【讨论】：