Question

我的代码是，

@font-face { font-family: Affogato-Light;   src: url("fonts/Affogato-Light.woff2")   }
@font-face { font-family: Affogato-Regular; src: url("fonts/Affogato-Regular.woff2") }
@font-face { font-family: Affogato-Medium;  src: url("fonts/Affogato-Medium.woff2")  }
@font-face { font-family: Affogato-Bold;    src: url("fonts/Affogato-Bold.woff2")    }
@font-face { font-family: Affogato-Black;   src: url("fonts/Affogato-Black.woff2")   }

多个子字体是否有@font-face或{ font-family }缩写形式，即Light，Regular等？谢谢！

Answer 1

是的，有。

它被称为Style linking。您可以阅读更多相关信息here

在您的情况下，代码将如下所示：

@font-face {
  font-family: Affogato;
  src: url("fonts/Affogato-Light.woff2");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: Affogato;
  src: url("fonts/Affogato-Regular.woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Affogato;
  src: url("fonts/Affogato-Medium.woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: Affogato;
  src: url("fonts/Affogato-Bold.woff2");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: Affogato;
  src: url("fonts/Affogato-Black.woff2");
  font-weight: 900;
  font-style: normal;
}

以后您可以通过将以下类应用于元素来使用它：

.u200 {
    font-weight: 200;
    font-style: normal;
}

.u400 {
    font-weight: 200;
    font-style: normal;
}

.u600 {
    font-weight: 200;
    font-style: normal;
}

.u800 {
    font-weight: 200;
    font-style: normal;
}

.u900 {
    font-weight: 200;
    font-style: normal;
}

您只需将字体应用于body：

body {
    font-family: Affogato;
}

Answer 2

CSS中不可能。

但你可以在SAAS中使用Mixin功能。

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

有没有更好的方法来实现多个@ font-faces？

2 个答案: