0

我在我的网页中嵌入了字体，并在 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，从而产生奇怪的结果，例如样式和粗细有时只是随机应用。

有什么解决办法吗？

4

1 回答 1

0

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

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

根据 CSS 2.1字体匹配算法，当请求斜体（或粗斜体）时，正则面不被视为匹配。这意味着浏览器应该回退到其默认字体，除非您的规则指定了辅助字体。实际上没有浏览器这样做：Safari 通过算法倾斜字形产生“合成斜体”，而大多数其他浏览器只使用常规字体（即，他们认为是常规字体，因为它是这样声明的）。在 CSS3 中，这将被更改，以便大多数浏览器的行为成为规范。

所以这是一项混乱的业务，为了避免混乱，请使用以下方法之一：

a) 将每个字体声明为自己的一个系列，作为常规和正常粗细，就像您在此处所做的那样，并且不要将除字体样式正常`以外的font-weight值直接或间接应用于这种字体中的文本（注意许多 HTML 元素产生斜体或粗体 b 默认）。normal' orvalues other than

b）将每个字体声明为系列中的字体，font-weight并以逻辑方式font-style设置，并以正常方式使用字体系列，声明何时需要粗体等。这就是谷歌网络字体由谷歌托管时的工作方式。@font-facefont-weight: bold

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

于 2013-02-27T07:10:31.497 回答