@font-face 不能倾斜答案

【问题标题】：@font-face not working as oblique@font-face 不能倾斜
【发布时间】：2013-12-03 12:01:06
【问题描述】：

所以我有 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 condensed oblique”。我有大约 50 种字体，倾斜的字体不起作用。这是巧合吗？

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

【问题讨论】：

这就像试图在'oblique'中显示一个gif图像......不会工作。获取字体集的 OBLIQUE 变体。
那么为什么当我在检查器中放置 font-style: oblique 时它会起作用？如果我保持字体样式正常，它甚至不会显示，并且除了名称之外的所有内容都匹配“helvetica neue black condensed”
您的检查器正在覆盖字体并显示除“HelveticaNeueBlackCondensed”之外的其他内容。同时，在网上搜索'helveticaNeue' BUG...google.ca/…

标签： css fonts

【解决方案1】：

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

如果没有可用的倾斜字体并且为元素声明font-style: oblique，某些浏览器实际上可能会对字体应用算法倾斜。（这个问题没有揭示是否是后者。）当然，这在印刷上很糟糕。实际上，在这种情况下不会发生这种情况，因为@font-face 规则声明 a 字体是倾斜的（尽管它显然是正常的）。

【讨论】：

【解决方案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;
}

顺便说一句，Google Chrome 似乎不知道 format("ttf") 参数，所以您可能想跳过它。

【讨论】：

【解决方案3】：

事实证明，出于某种原因，即不允许字体系列名称超过 4 个单词。我只是将名称更改为“helveneueblack condensed oblique”，问题就解决了。呐喊

【讨论】：