@Font-Face 与同一家族中的浓缩字体答案

【问题标题】：@Font-Face with condensed fonts in the same family@Font-Face 与同一家族中的浓缩字体
【发布时间】：2015-11-24 21:08:13
【问题描述】：

我有许多属于同一字体系列名称的字体。我需要为这些字体生成@font-face

Family Name: Test Pro
Font Name: TestPro-Cond
Font Name: TestPro-CondIt
Font Name: TestPro-It

我知道我可以使用我想要的任何名称创建一个 @font-face 并引用字体文件。但是我想遵循正确的网络标准。我不确定如何处理这些“浓缩”字体。有人对此有经验吗？

目前我有

@font-face {
    font-family: "Test Pro Bold Condensed Italic";
    src: url('./fonts/TestPro-BoldCondIt.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Test Pro Bold Italic";
    src: url('./fonts/TestPro-BoldIt.otf');
    font-weight: normal;
    font-style: normal;
}

【问题讨论】：

不确定这是否有帮助，但谷歌字体@import 是这样的：@import url(https://fonts.googleapis.com/css?family=Roboto:400,100italic,300,500);

标签： css fonts font-face

【解决方案1】：

如果你仔细想想，精简字体实际上基本上是一个不同的家族。

你所做的很好，但你可以像这样简化整个树：

@font-face {
    font-family: "Test Pro Condensed";
    src: url('./fonts/TestPro-CondReg.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Test Pro Condensed";
    src: url('./fonts/TestPro-BoldCondIt.otf');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Test Pro";
    src: url('./fonts/TestPro-Reg.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Test Pro";
    src: url('./fonts/TestPro-BoldIt.otf');
    font-weight: bold;
    font-style: italic;
}

然后只需担心在您的样式中使用font-family: "Test Pro"; 等适当的font-weight 和font-style 来触发较重的重量和/或斜体版本。浏览器将自动模拟您未包含的任何组合（尽管它可能看起来很糟糕。）

最后，尽量使用woff 和woff2 作为src，如果可能的话，文件会小很多。

【讨论】：

【解决方案2】：

应该可以使用名为font-stretch 的css 属性，但在撰写本文时，所有主流浏览器都没有涵盖它。

见https://caniuse.com/#feat=css-font-stretch

【讨论】：