4

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

问题

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

字体本身的跨浏览器渲染不是这里的问题，我只是想让它显示出来。

我们尝试过的

我们（在我工作的公司）花了很多时间做以下事情：
- 我们发现了多种语法，字体松鼠的语法更完整。
- 在页面加载后的几秒钟内重新加载 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;
        }

谢谢！

4

2 回答 2

1

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

我注意到您的 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;
}

您可以在http://imageftw.com/uploads/20130116/font-fix.png在 IE8 (PC) 中查看结果

这个小技巧解决了 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')属性中使用相对/绝对路径。

于 2013-01-16T20:13:32.777 回答
0

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

IE 6、7 和 8 将无法工作。每个浏览器对字体的渲染之间的不一致是一个众所周知的问题。在我看来——根据你的屏幕截图——现代浏览器的发展也值得期待。所有基于 webkit 的浏览器（safari、chrome 和 opera）在渲染上应该比 firefox 或 9 更接近。

于 2013-01-16T19:15:39.663 回答