仅限IE9的字体问题（渲染后备字体）
[英]IE9 only font-face issue (rendering fallback font)
问题描述
The site works fine on chrome and the latest version of ff. 
该网站可以在chrome和ff的最新版本上正常运行。 It also appears to work fine and display the correct font on IE8; 它似乎也可以正常工作，并在IE8上显示正确的字体。 However in IE9 it is displaying a bolder font. 但是，在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;
}
According to another question, it would seem the fix is to change format from eot, to embedded-opentype however as you can see this has already been done. 根据另一个问题，看来解决方法是将格式从eot更改为Embedded-opentype，但是正如您所看到的，这已经完成了。
the font family being used in the document: 文档中使用的字体系列：
font-family 'effralight','effraregular' it appears that in IE9, it is using the fallback font effraregular (if I live edit effraregular to remove it, it defaults to times new roman or something similar). font-family'effralight'，'effraregular'似乎在IE9中使用的是后备字体effraregular（如果我实时编辑effraregular来删除它，则默认为新罗马时代或类似名称）。
doctype: <!DOCTYPE html SYSTEM "about:legacy-compat"> doctype： <!DOCTYPE html SYSTEM "about:legacy-compat">
1 个解决方案
解决方案1
0 2014-04-28 05:07:19
Try placing a meta tag into your HTML as a quick workaround, which will tell IE9 to emulate IE8 , bringing back the original rendering. 尝试将meta标签放入HTML中作为一种快速的解决方法，它将告诉IE9模仿IE8并恢复原始渲染。 or for more information on same 或有关更多信息
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> in your section. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 。
But with this you have to compromise with other IE9 features like the better HTML5 and CSS3 support. 但是与此同时，您必须妥协其他IE9功能，例如更好的HTML5和CSS3支持。
Generally, when you tell IE9 to render font as bold , the required switch will happen for font-weight s of 800 and 900 . 通常，当您告诉IE9将字体呈现为bold ，所需的切换将在font-weight为800和900 。
or use 或使用
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;
Even using nomalize.css may help you in the same 即使使用nomalize.css也可以帮助您
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.