Question

所以我有2种字体。

@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 black condensed'工作得很好，但由于某种原因，浏览器无法识别'helvetica neue black condenly oblique'。我有大约50种字体，倾斜的字体不起作用。这是巧合吗？

请不要告诉我有关使用某些字体的信息。我有许可证。不要告诉我做字体样式：倾斜;在main.css中我想要一个倾斜的字体系列，默认是倾斜的。

Answer 1

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

如果没有可用的倾斜字体，某些浏览器实际上可能会将算法倾斜应用于字体和 font-style: oblique是为元素声明的。（问题并未揭示后者是否属于这种情况。）当然，这在印刷上是不好的。在实际方面，在这种情况下不会发生，因为@font-face规则声明一个字体是倾斜的（即使它看起来很正常）。

Answer 2

你正在做的就像试图以'倾斜'显示gif图像，它将无法正常工作。

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

您必须定位字体集的OBLIQUE变体。

用户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;
}

顺便说一下，谷歌浏览器似乎不知道format("ttf")参数，所以你可能想跳过它。

Answer 3

事实证明，由于某种原因，即不允许超过4个字的字体系列名称。我只是将名字改为'helveneueblack浓缩斜'，问题解决了。呼叫声

@ font-face不能像斜一样工作

3 个答案: