Safari 和 IE 无法读取 TTF 和 EOT 字体答案

【问题标题】：Safari and IE can't read TTF and EOT fontsSafari 和 IE 无法读取 TTF 和 EOT 字体
【发布时间】：2014-01-20 14:44:19
【问题描述】：

我在 Safari 中阅读字体时遇到问题。我将 OTF 转换为 TTF - 两种粗体和常规字体。在 Chrome 和 Firefox 中都很好。但在 Safari 中，只有粗体字体有效，普通字体无效。
IE 无法读取我从网站转换的 EOT 字体。有没有更好的方法将 OTF 转换为 EOT？

这是我的代码：

<style type="text/css">
//Bariol_Bold
@font-face{
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.eot"); /*For ie browser*/
}

@font-face{ 
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.ttf"); /*For other browsers*/
}

//Bariol_Regular
@font-face{
    font-family:bariol_regular;
    src:url("fonts/bariol_regular.eot"); /*For ie browser*/
}

@font-face{ 
    font-family: bariol_regular;
    src:url("fonts/bariol_regular.ttf"); /*For other browsers*/  
</style>

<p style="font-family: Bariol_Bold; font-size: 20px;">hello world</p>
<p style="font-family: bariol_regular; font-size: 20px;">hello world</p>

【问题讨论】：

标签： css safari cross-browser font-face truetype

【解决方案1】：

您应该检查Paul Irish's Bulletproof @font-face Syntax 或FontSpring's @font-face Syntax，它们需要在不同文件类型中多次声明相同字体以服务多个浏览器。

基本声明是这样的

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
   url('myfont-webfont.woff') format('woff'), 
   url('myfont-webfont.ttf')  format('truetype'),
   url('myfont-webfont.svg#svgFontName') format('svg');
}

我也更喜欢FontSquirrel's @font-face Generator，但你可以谷歌其他替代品。 FontSquirrel 只需要转换一种字体，它将为您提供一个基本的.zip 文件，其中包含必要的字体类型以及生成的字体的示例演示。

【讨论】：