{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Deceive 欺骗 的问题《IE Font-face issues & solutions we tried》','https://www.manongdao.com/q-1364134.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I know this is a common problem, I tried pretty much every solution I could find, and I wondered if showing a little bit of code would be more useful.
The issue
I am trying to implement 4 font-faces for a client. The current files have been generated with font-squirrel. However, the fonts are not working at all for IE 7/8, and partially working for IE9.
The cross-browser rendering of the font itself is not the problem here, I just want it to be displayed.
What we've tried
We spent (at the company I am working for) a lot of hours doing the following :
- Multiple syntaxes we found, the font-squirrel one being the more complete.
- Reloading the CSS in JavaScript, seconds after the page is loaded (worked for an old project).
- Check all the syntax issues.
- Check if there was a 404 error
- Putting the same name, but witfh different font-weight
- Tried to add ?#iefix and the specific format used
Screenshot
Sample Code
You can see it live at : http://dev.phin.fr/fontsie/
Syntax
@font-face {
font-family: 'DidotBoldItalic';
src: url('fonts/DidotHTF-24BoldItalic.eot');
src: url('fonts/DidotHTF-24BoldItalic.ttf') format('truetype'), url('fonts/DidotHTF-24BoldItalic.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Thank you!
Please go here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
IE 6, 7 and 8 will not work. The inconsistencies between each browser's rendering of a font is a commonly known problem. It appears to me -- based off your screen shot -- that the modern browsers are rending about as well to be hoped. All the webkit-based browsers (safari, chrome, and opera) should be closer in their rendering to each other than firefox or ie 9 separately.
I took the liberty of downloading all the files and code from your example.
I notice that you are missing the «local('☺')» attribute in your CSS declaration, take a look at the third line of the following example:
You can see the result in IE8 (PC) at http://imageftw.com/uploads/20130116/font-fix.png
This little trick fixes the problem for the Sofia font but, unfortunately, does not work for the Didot font. I can assume that the font is not originally a web font or has copyrights and fontsquirrel fails to transform it.
The following is only my personal opinion.
When working with fonts, try to put all your @font-face declarations in a CSS file within the same directory that has all your font files and then just link such CSS file to the
<head>of your document.Example:
This will not only make easier to find the @font-face applied but will also avoid the use of relative/absolute paths within the
url('myfont/font.ttf')attribute.