使用 @font-face 会导致 Safari 中显示不同的字符

Question

我已使用此代码为我的网站添加了字体：

@font-face {
    font-family: 'ChunkFive-Roman';
    src: url('/css/font/ChunkFive-Roman.eot') format('eot'), 
         url('/css/font/ChunkFive-Roman.otf')  format('opentype'),
         url('/css/font/ChunkFive-Roman.woff') format('woff'), 
         url('/css/font/ChunkFive-Roman.ttf')  format('truetype'),
         url('/css/font/ChunkFive-Roman.svg#ChunkFive-Roman') format('svg');
}

这在 XP 上除了 Safari 之外的所有浏览器都可以正常工作：

为什么会这样，更重要的是，我该如何解决这个问题？

这些字体可用here。

Answer 1

找到一篇关于这个问题的文章：WEBKIT (SAFARI 3.1) AND THE CSS @FONT-FACE DECLARATION

@font-face 的 CSS 规范部分非常具体 - 字体将根据 @font-face 声明块本身中放置的大量标准来选择。可以在 @font-face 声明中定义各种文本 CSS 属性，然后在稍后在 CSS 中引用字体时检查它们。例如，如果我有两个针对 Diavlo 系列的 @font-face 声明——一个用于常规文本，一个用于更重的字体版本——然后我稍后在 font-family: 属性中使用 Diavlo，它应该参考在第一个 @font-face 中定义的基本 Diavlo 字体。但是，如果我要这样做，但还要指定一个重字体粗细：，那么它应该使用较重的 Diavlo 版本。将此示例放入代码中：

@font-face {
  font-family: 'Diavlo';
  src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}

@font-face {
  font-family: 'Diavlo';
  font-weight: 900;
  src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Diavlo';
  font-weight: 900;
}

div#content {
  font-family: 'Diavlo';
}

如您所见，我的标题应该使用 Diavlo_Black.otf 中定义的字体，而我的正文内容应该使用 Diavlo_Book.otf。然而，在 WebKit 中，这不起作用——它完全忽略了 @font-face 声明中除了 font-family: 和 src: 之外的任何属性！完全无视他们！不仅如此 - 不仅如此 - 它忽略了给定 font-family: 属性字符串的最后一个 @font-face 之外的所有内容！

这里的含义是，为了使@font-face 像当前在 WebKit（以及因此，Safari 3.1）中实现的那样工作，我必须声明完全虚构的、不存在的类型族来单独满足 WebKit。这是我在当前实现@font-face 的地方使用的方法：

@font-face {
  font-family: 'Diavlo Book';
  src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}

@font-face {
  font-family: 'Diavlo Black';
  src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Diavlo Black';
}

div#content {
  font-family: 'Diavlo Book';
}