Birden çok @ font yüzünü uygulamak için daha iyi bir yol var mı?

Question

Kodum,

@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") } 

birden subfonts için @font-face veya { font-family } kısa biçim var mı, yani Light, Regular vs.? Teşekkürler!

Answer 1

CSS'de mümkün değil.

Ancak SAAS'ta Mixin işlevini kullanabilirsiniz.

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

Answer 2

Evet, var.

Style linking. sizin durumda here

, kodu şöyle dönecek hakkında daha fazla bilgiyi okuyabilirsiniz:

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

ve daha sonra elemanları için aşağıdaki sınıflar uygulayarak kullanabilirsiniz:

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

Yazı tipini yalnızca bir kere body:

body { 
    font-family: Affogato; 
}