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

Syntax 或 FontSpring 的

@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 的

@font-face

Generator 但你可以谷歌其他替代品。 FontSquirrel 只需要转换一种字体，它将为您提供一个基本的

.zip

文件，其中包含必要的字体类型以及生成的字体的示例演示。

Answer 2

搜索语法错误

示例 CSS 显示多个语法错误：

1. 纯 CSS 中的注释必须用

   /*

   和

   */

   括起来 – 不适用于未编译的 SCSS/Sass 代码
2. 最后一个样式规则没有被“大括号”正确关闭

   }

字体源堆栈

幸运的是，我们不用再担心ie了。
因此，每当您看到字体套件中包含的

.eot

文件或示例 CSS 中引用的

.eot

文件时，您都可以安全地删除它。

.eot 仅在 ie8 之前需要（~ 2008 年，2011 年被 ie9 取代）

假设 ie 专有的

@font-face{
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.eot"); 
}

/* Takes precedence – won't work for ie "browser" */
@font-face{ 
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.ttf"); 
}

 格式仍然相关 - CSS 也不起作用：

@font-face

第二个

@font-face{
    font-family: Bariol_Bold;
    src: url("fonts/bariol_bold.eot"),
         url("fonts/bariol_bold.ttf");
}

规则将简单地覆盖前一个规则（对于ie）。正确的 src 堆栈 – 采用

第一个有效的候选字体文件

 – 将是：

,

不同来源必须用逗号

woff2

分隔。 任何理智的浏览器都会跳过 eot 文件并坚持使用第一个有效的字体文件 - 在本例中为 truetype。

感谢 ie 的消亡，我们可以放心地依赖
@font-face

 支持。

因此，您可以通过仅引用单个字体文件来简化您的操作，如下所示：

@font-face{
    font-family: Bariol_Bold;
    src: url("fonts/bariol_bold.woff2") format('woff2');
}

或具有扩展的遗留支持

@font-face{
    font-family: Bariol_Bold;
    src: url("fonts/bariol_bold.woff2") format('woff2'),
         url("fonts/bariol_bold.woff") format('woff'),
         url("fonts/bariol_bold.ttf") format('truetype');
}

虽然格式标识符通常可以省略，但您最好包含它们以获得最佳兼容性。注意：truetype 的正确标识符是

format('truetype')

而不是“ttf”——无效的标识符将违反规则。

此外，您应该在 font-face 规则中指定字体粗细和样式，而不是为每种样式定义新的字体系列名称：

/* regular */
@font-face{
    font-family: Bariol;
    font-weight: 400;
    font-style: normal;
    src: url("fonts/bariol.woff2") format('woff2'),
         url("fonts/bariol.woff") format('woff'),
         url("fonts/bariol.ttf") format('truetype');
}

/* italic */
@font-face{
    font-family: Bariol;
    font-weight: 400;
    font-style: italic;
    src: url("fonts/bariol_italic.woff2") format('woff2'),
         url("fonts/bariol_italic.woff") format('woff'),
         url("fonts/bariol_italic.ttf") format('truetype');
}

/* bold */
@font-face{
    font-family: Bariol;
    font-weight: 700;
    font-style: normal;
    src: url("fonts/bariol_bold.woff2") format('woff2'),
         url("fonts/bariol_bold.woff") format('woff'),
         url("fonts/bariol_bold.ttf") format('truetype');
}

/* bold italic */
@font-face{
    font-family: Bariol;
    font-weight: 700;
    font-style: talic;
    src: url("fonts/bariol_bold_italic.woff2") format('woff2'),
         url("fonts/bariol_bold_italic.woff") format('woff'),
         url("fonts/bariol_bold_italic.ttf") format('truetype');
}