IE字体问题及我们尝试的解决方案

Question

IE字体问题及我们尝试的解决方案

internet-explorerfontscross-browserfont-facewebfonts

4

我知道这是一个常见的问题，我尝试了几乎所有我能找到的解决方案，并且我想知道展示一点代码是否更有用。

问题

我正在为客户实现4个字体。当前文件是使用font-squirrel生成的。然而，在IE 7/8中字体根本不起作用，在IE9中部分起作用。

这里的问题并不是字体在跨浏览器渲染方面，我只是希望它能够显示。

我们尝试过的

我们花了很多时间（在我工作的公司）进行以下操作：
- 我们发现了多种语法，其中font-squirrel是最完整的。
- 在页面加载后几秒钟内，在JavaScript中重新加载CSS（对旧项目有效）。
- 检查所有语法问题。
- 检查是否有404错误
- 使用相同的名称，但具有不同的字体粗细
- 尝试添加?#iefix和特定格式

屏幕截图

输入图像描述

示例代码

您可以在此处实时查看：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;
        }

谢谢你！

- Séraphin Hochart

2个回答

0

请点击这里：http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

IE 6、7和8不会起作用。每个浏览器对字体的渲染存在明显差异是一个常见问题。根据您提供的截图，现代浏览器的渲染效果应该是可以期待的。所有基于Webkit的浏览器（Safari、Chrome和Opera）在它们的渲染中应该比Firefox或IE9更接近彼此。

- cliffbarnes

谢谢！渲染不是问题（虽然它确实是，但现在并不重要）。在这些IE版本中，其他字体的font-face可以正常工作。 - Séraphin Hochart

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- EOZyo · Accepted Answer

我自行下载了您的示例中的所有文件和代码。

我注意到您在CSS声明中缺少“local('☺')”属性，请查看以下示例的第三行：

@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;
}

您可以在IE8（PC）上查看http://imageftw.com/uploads/20130116/font-fix.png的结果。

这个小技巧可以解决Sofia字体的问题，但不幸的是，对于Didot字体无效。我可以假设该字体不是原始的网络字体或具有版权，因此fontsquirrel无法转换它。

以下仅为个人意见。

在使用字体时，请将所有@font-face声明放在同一目录中具有所有字体文件的CSS文件中，然后只需将此类CSS文件链接到文档的<head>中。

例如：

/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')属性中使用相对/绝对路径。