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

Question

1. 我在Safari中阅读字体时遇到问题.我将OTF转换为TTF - 两种粗体和常规字体.两者都适用于Chrome和Firefox.但在Safari中,只有粗体字体才有效,而常规则不然.

2. 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>

Answer 1

您应该检查Paul Irish的Bulletproof @font-face语法或FontSpring的@font-face语法,它需要在不同文件类型中对相同字体进行多次声明,以便为多个浏览器提供服务.

基本声明就像

@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的@font-faceGenerator,但你可以谷歌其他替代品.FontSquirrel只需要转换一种字体,它将为您提供.zip包含必要字体类型的基本文件以及生成的字体的示例演示.