css - incluir - Múltiples ponderaciones de fuente, una consulta @ font-face
importar fuente css (2)
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
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;
}
@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;
}