@字体-脸不是斜的

Question

所以我有两个字体。

@font-face {
  font-family: 'helvetica neue black condensed';
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.eot');
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed?#iefix') format('embedded-opentype'),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.woff') format("woff"),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.ttf') format("truetype");
       font-style: normal;
       font-weight: normal;
     }
@font-face {
  font-family: 'helvetica neue black condensed oblique';
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.eot');
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed?#iefix') format('embedded-opentype'),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.woff') format("woff"),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.ttf') format("truetype");
       font-style: oblique;
       font-weight: normal;
     }

如您所见，它们都引用同一个文件。第一个是正常的，第二个是斜的。“helvetica neue黑色浓缩”工作得很好，但由于某种原因，浏览器无法识别“helvetica neue黑色浓缩斜”。我有大约50种字体，而斜字体不起作用。这是巧合吗？

请不要教训我使用某些字体。我有执照。不要告诉我使用字体样式:斜字体；在main.css中，我想要一个默认是斜字体的字体系列。

Answer 1

因此，出于某种原因，(不允许字体家族名称超过4个单词)。我刚改名为“黑衣浓缩斜”，问题解决了。呼呼

Answer 2

正如您所说，问题中的代码在这两条规则中使用相同的URL。您不能仅仅通过在名称中使用“斜”一词或为其声明font-style: oblique就可以使字体倾斜。您需要在第二条规则中引用包含斜字体的文件。

如果没有斜面字体，并且为元素声明了font-style: oblique，某些浏览器实际上可以将算法倾斜到字体上。(问题并不显示后者是否属实。)当然，这在排版上是不好的。在实际情况下，这种情况不会发生，因为@font-face规则将字体声明为斜字体(尽管它显然是正常的)。

Answer 3

你所做的就像试图在“斜”中显示一个gif图像，它是行不通的。

字体，字形是某种类型的“图像”。

您必须针对您的字体集的斜变体。

用户Jukka K Korpela写的更直接。

[ copy-paste of an epic answer about the same situation ]在这里我要回答我自己的问题。解决方案似乎是添加多个@font-face规则，例如：

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

顺便说一句，谷歌Chrome似乎不知道format("ttf")的论点，所以你可能想跳过这一点。