Safari和IE无法读取TTF和EOT字体 [英] Safari and IE can't read TTF and EOT fonts

问题描述

1. 我在Safari中读取字体时遇到问题。我将OTF转换为TTF - 两种大胆和规则的字体。两者在Chrome和Firefox都很好。

1. I have trouble reading a font in Safari. I converted OTF to TTF - two bold and regular fonts. Both are fine in Chrome and Firefox. But in Safari, only the bold font is works, regular does not.

IE不会读取我从网站转换的EOT字体。有没有更好的方法将OTF转换为EOT？

IE does not read the EOT font which I have converted from a website. Is there any better way to convert OTF to 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>

推荐答案

您应该检查 Paul Irish的Bulletproof @ font-face 语法或 FontSpring的 @ font-face 语法，它需要在不同文件类型中对服务器多个浏览器使用相同字体的多个声明。

You should check Paul Irish's Bulletproof @font-face Syntax or FontSpring's @font-face Syntax which needs multiple declarations of the the same font in different file types to server multiple browsers.

基本声明类似于

@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-face 生成器，但您可以使用Google其他选项。 FontSquirrel只需要一个字体进行转换，它将提供一个基本的 .zip 文件，其中包含必要的字体类型以及生成的字体的示例演示。

I also prefer FontSquirrel's @font-face Generator but you can Google other alternatives. FontSquirrel just needs one font to be converted and it will provide you with a basic .zip file that contains necessary font types plus a sample demo of the fonts generated.

这篇关于Safari和IE无法读取TTF和EOT字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！