问题

Question

我知道这是一个常见问题，我几乎尝试了所有可以找到的解决方案，我想知道是否显示一些代码会更有用。

问题

我正在尝试为客户端实现4个字体。使用font-squirrel生成当前文件。但是，对于IE 7/8，字体根本不起作用，而且部分适用于IE9。

字体本身的跨浏览器呈现不是问题，我只是希望它显示。

我们尝试了什么

我们（在我工作的公司）花了很多时间做以下事情：
- 我们发现了多种语法，字体松鼠更完整。
- 在加载页面几秒钟后（在旧项目中工作），在JavaScript中重新加载CSS。
- 检查所有语法问题。
- 检查是否有404错误
- 使用相同的名称，但字体重量不同
- 试图添加？#iefix和使用的具体格式

截图

enter image description here

示例代码

您可以在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;
        }

谢谢！

Answer 1

我冒昧地从你的例子中下载了所有文件和代码。

我注意到您在CSS声明中缺少«本地（'☺'）»属性，请查看以下示例的第三行：

@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

的IE8（PC）中查看结果

这个小技巧解决了Sofia字体的问题，但不幸的是，它不适用于Didot字体。我可以假设该字体最初不是Web字体或具有版权，而且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')属性中使用相对/绝对路径。

Answer 2

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

IE 6,7和8不起作用。每个浏览器呈现字体之间的不一致是一个众所周知的问题。在我看来 - 基于你的屏幕截图 - 现代浏览器也在不断受到期待。所有基于webkit的浏览器（safari，chrome和opera）应该比firefox或者9分别更接近它们的渲染。

IE字体问题＆amp;解决方案我们尝试

问题

我们尝试了什么

截图

示例代码

语法

2 个答案: