IE Font-face问题&我们试过的解决方案 [英] IE Font-face issues & solutions we tried
问题描述
我知道这是一个常见的问题，我试过几乎每一个解决方案，我可以找到，我想知道是否显示一点点代码会更有用。
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.
我试图为客户端实现4个字体。当前文件已使用font-squirrel生成。但是，对于IE 7/8，字体根本不工作，并且部分工作在IE9。
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.
我们花费了大量的时间来完成以下工作：
- 我们发现的多种语法，font-squirrel是更完整的。
- 在JavaScript中重新加载CSS，在页面加载后的几秒钟（为一个旧项目工作）。
- 检查所有语法问题。
- 检查是否有404错误
- 使用相同的名称，但是具有不同的字体大小
- 试图添加？ iefix和使用的具体格式
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
可以看到它住在： http://dev.phin.fr/fontsie/
@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;
}
谢谢！
推荐答案
我自由下载了你的示例中的所有文件和代码。
I took the liberty of downloading all the files and code from your example.
我注意到你缺少« local（'☺'）»属性，请查看以下示例的第三行：
I notice that you are missing the «local('☺')» attribute in your CSS declaration, take a look at the third line of the following example:
@font-face {
font-family: 'SofiaProBold';
src: url('Sofia-Pro-Bold.eot');
src: local('☺'), url('Sofia-Pro-Bold.ttf') format('truetype'), url('Sofia-Pro-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
您可以在 http://imageftw.com/uploads/20130116/font-fix.png
这个小窍门解决了索菲亚字体的问题，但不幸的是，它不适用于Didot字体。
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.
以下只是我的个人意见。
使用字体时，尝试将所有的@ font-face声明放在一个CSS文件中的同一个目录下的所有字体文件，然后只是链接这样的CSS文件到您的文档的< head> 。
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.
示例：
/fonts/myfont/myfont.css « add to the document's <head>
/fonts/myfont/myfont.woff
/fonts/myfont/myfont.eot
/fonts/myfont/myfont.ttf
/fonts/myfont/myfont.svg
这将不仅更容易找到@ font-face应用，而且还将避免使用相对/ url（'myfont / font.ttf'）属性中的绝对路径。
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.
这篇关于IE Font-face问题&我们试过的解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
