使用@ 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');
}

除了Safari之外，所有浏览器都适用于XP：

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

这些字体可用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';
}