Question

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

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

据我所知，我可以使用我想要的任何名称创建@ font-face并引用字体文件。但是，我想遵循正确的Web标准。我不确定的是如何处理这些＆＃39;浓缩＆＃39;字体。有任何人对此有经验吗？

目前我有

@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;
}

Answer 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，文件大小要小得多。

Answer 2

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

请参阅https://caniuse.com/#feat=css-font-stretch

@ Font-Face与同一系列中的压缩字体

2 个答案: