css - 嵌入式字体 B 和我不在 safari 3.2 上工作

Question

我在我的网页中嵌入了字体，并随机在 div 中使用 font-style = italic 和 font-weight = 700。

我的@font-face 规则是:

 @font-face {
    font-family: 'Arimo';
    src: url('fonts/arimo_bold_italic.eot');
    src: url('fonts/arimo_bold_italic.eot?#iefix') format('embedded-opentype'),url('fonts/arimo_bold_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

虽然添加的字体样式和字体粗细在所有浏览器上都运行良好，但它似乎在 Safari 3.2 上不起作用，给出奇怪的结果，例如样式和粗细有时只是随机应用。

有什么解决办法吗？

Answer 1

您将字体指定为正常重量、常规(不是斜体)。这是可能的并且经常用于克服一些浏览器限制，这也是 FontSquirrel 在其生成的 CSS 文件中使用的方式。但这是有其含义的。

在这种情况下，font-family: Arimo 单独生成粗体斜体 Arimo，因为这是您定义名称 Arimo 的方式。对于浏览器，Arimo 只是一种正常重量的常规字体，所以如果你问，在 CSS 中或间接地，例如通过 b 或 i 标记，它以粗体或斜体使用，大多数浏览器将使用这种字体。

根据 CSS 2.1 font matching algorithm ，当要求斜体(或粗体斜体)时，常规面孔不被视为匹配项。这意味着浏览器应回退到其默认字体，除非您的规则指定了辅助字体。没有浏览器真正做到这一点:Safari 通过算法倾斜字形产生“合成斜体”，而大多数其他浏览器只使用常规字体(即，自从以这种方式声明后，它们认为是常规字体)。在 CSS3 中，这将被更改，以便大多数浏览器的行为成为规范。

所以这是一个困惑的业务，为了避免困惑，请使用以下方法之一:

a) 像您在这里所做的那样，将每个字体声明为自己的一个系列，作为常规和正常重量，并且不应用font-weight values other than normal' orfont-stylevalues other thannormal` 直接或间接地以这种字体的文本(请注意，许多 HTML 元素默认生成斜体或粗体 b ).

b) 在@font-face 中设置font-weight 和font-style 将每个字体声明为家族中的一种字体> 合乎逻辑的方式，并以正常方式使用字体系列，在需要粗体时声明 font-weight: bold 等。当由 Google 托管时，这就是 Google Web 字体的工作方式。

附言奇怪的是，'@font-face' 规则没有提到 WOFF 格式文件，当浏览器支持时，这是可下载字体的首选格式。生成器通常也会生成它，并将其包含在规则中。