Css @同一系列中压缩字体的字体面

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

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

我知道我可以用我想要的任何名称创建@font-face并引用字体文件。但是，我希望遵循正确的web标准。我不确定的是如何处理这些“浓缩”字体。有人有这方面的经验吗

目前我有

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

---

如果你仔细想想，浓缩字体实际上是一个不同的家族

您所做的很好，但您可以简化整个树，如下所示：

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

然后只担心使用

字体系列：“Test Pro”font-weight

和

font-style

在您的样式中编码>等，以触发较重的字体和/或斜体版本。浏览器将自动模拟您未包含的任何组合（尽管它可能看起来很糟糕）

---

最后一件事，尝试使用

woff

和

woff2

作为

src

，如果可能的话，文件大小要小得多。

如果你仔细想想，压缩字体实际上是一个不同的系列

您所做的很好，但您可以简化整个树，如下所示：

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

然后只担心使用

字体系列：“Test Pro”font-weight

和

font-style

在您的样式中编码>等，以触发较重的字体和/或斜体版本。浏览器将自动模拟您未包含的任何组合（尽管它可能看起来很糟糕）

---

最后，如果可能的话，尝试对

src

使用

woff

和

woff2

，文件大小要小得多。

应该可以使用名为

font-stretch

的css属性，但在编写本文时，并没有在所有主要浏览器中都涉及到它

---

请参见

应该可以使用名为

font-stretch

的css属性，但在撰写本文时，并没有在所有主要浏览器中都介绍它

---

请参见

不确定这是否有帮助，但google fonts@import是这样做的：

@import url(https://fonts.googleapis.com/css?family=Roboto:400，100斜体，300500）不确定这是否有帮助，但google fonts@import是这样做的：
@import url(https://fonts.googleapis.com/css?family=Roboto:400，100斜体，300500）