css - incluir - Múltiples ponderaciones de fuente, una consulta @ font-face

importar fuente css

Question

Tengo que importar la fuente Klavika y la he recibido en múltiples formas y tamaños:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

Ahora me gustaría saber si es posible importarlos en CSS con solo una @font-face -query, donde estoy definiendo el weight en la consulta. Quiero evitar copiar / pegar la consulta 8 veces.

Entonces algo como:

@font-face {
  font-family: ''Klavika'';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

Answer 1

En realidad, hay un sabor especial de @ font-face que permitirá justo lo que estás preguntando.

Aquí hay un ejemplo que usa el mismo nombre de familia de fuente con diferentes estilos y pesos asociados con diferentes fuentes:

@font-face {
font-family: ''DroidSerif'';
src: url(''DroidSerif-Regular-webfont.ttf'') format(''truetype'');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ''DroidSerif'';
src: url(''DroidSerif-Italic-webfont.ttf'') format(''truetype'');
font-weight: normal;
font-style: italic;
 }
@font-face {
font-family: ''DroidSerif'';
src: url(''DroidSerif-Bold-webfont.ttf'') format(''truetype'');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: ''DroidSerif'';
src: url(''DroidSerif-BoldItalic-webfont.ttf'') format(''truetype'');
font-weight: bold;
font-style: italic;
}

Ahora puede especificar font-weight:bold o font-style:italic a cualquier elemento que desee sin tener que especificar la font-family o anular font-weight y font-style .

body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}

Para obtener una descripción general completa de esta característica y el uso estándar, consulte 456bereastreet.com/archive/201012/…

EJEMPLO DE PLUMA

Answer 2

@font-face {
  font-family: ''Klavika'';
  src: url(../fonts/Klavika-Regular.otf) format(''truetype'') font-weight-normal,
       url(../fonts/Klavika-Bold.otf) format(''truetype'') font-weight-bold,
       url(../fonts/Klavika-Bold-Italic.otf) format(''truetype'') font-italic font-weight-bold;
}