Varios pesos de fuente, una consulta @ font-face

118

Tengo que importar la fuente Klavika y la he recibido en varias 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 a CSS con solo una consulta @font-face, donde estoy definiendo weighten 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;
}
css fonts font-face Rvervuurt
fuente
4
No es una fuente ... son fuentes múltiples ... así que desafortunadamente, creo que tendrías que sonreír y soportarlo.
Paulie_D
Sí, lo siento, son fuentes diferentes dentro de la misma familia.
Rvervuurt
Múltiples archivos de fuentes web === pesos diferentes
Eric
2
este artículo podría ayudar: 456bereastreet.com/archive/201012/… de hecho, hay una respuesta SO aquí: stackoverflow.com/questions/10045859/… que usa ese artículo, una alternativa a lo que desea, ya que lo que desea no es posible.
97ldave

Respuestas:

270

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

Aquí hay un ejemplo que utiliza el mismo nombre de familia de fuentes 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:boldo font-style:italiccualquier elemento que desee sin tener que especificar la familia de fuentes o anular font-weighty 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 función y el uso estándar, consulte este artículo.

PLUMA DE EJEMPLO

mayoman
fuente
1
tal como sugerí en mi comentario anterior ;-)
97ldave
4
En mi caso, esto solo usa el @ font-face más bajo. Eso sería el peso de la fuente: negrita; estilo de fuente: cursiva; cada vez que me refiero a font-family: 'DroidSerif';
Simon Arnold
1
¿Tiene una prueba que demuestre que este método realmente funciona? ¿Cómo probaría que el navegador no solo está falsificando el peso o el estilo sin leer el archivo de fuente correcto?
rojobuffalo
1
@rojobuffalo aquí hay un bolígrafo de ejemplo, funciona como se esperaba.
maioman
2
@rojobuffalo tiene un punto muy válido. El lápiz no hace nada para verificar la validez de la afirmación de que se comportará como se esperaba. Específicamente, eliminé la declaración de fuente en negrita del ejemplo de CSS y la ejecuté nuevamente. La apariencia era idéntica. ¿Estaba sacando del caché? ¿El navegador simplemente manipulaba el peso mostrado de la fuente normal?
10 
@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;
}
Mirka Nimsová
fuente
17
Escriba una pequeña explicación sobre por qué esto resolvería el problema. Puede ser algo simple como una oración.
ggderas
3
Misma solución que la anterior. Una notación más corta :)
Mirka Nimsová
2
¿Dónde puedo leer sobre estas notaciones? No lo veo en MDN
avalanche1
No parece funcionar y no puedo encontrar un recurso, pero parece que hay algo de verdad en ello.
dakab