0

我使用以下代码在我的网站上添加了字体：

@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 上都可以正常工作：

在此处输入图像描述 在此处输入图像描述

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

这些字体可在此处获得。

4

1 回答 1

0

找到一篇关于这个问题的文章：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';
}
于 2013-04-16T19:57:59.030 回答