Più spessori di carattere, una query @ font-face


118

Devo importare il carattere Klavika e l'ho ricevuto in più forme e dimensioni:

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

Ora vorrei sapere se è possibile importarli in CSS con una sola @font-facequery, dove sto definendo la weightnella query. Voglio evitare di copiare / incollare la query 8 volte.

Quindi qualcosa come:

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

4
Non è 1 carattere ... sono più caratteri ... quindi sfortunatamente, penso che dovresti solo sorridere e sopportarlo.
Paulie_D

Sì, scusa, sono caratteri diversi all'interno della stessa famiglia.
Rvervuurt

Più file webfont === pesi diversi
Eric

2
questo articolo potrebbe aiutare: 456bereastreet.com/archive/201012/… in realtà c'è una risposta SO qui: stackoverflow.com/questions/10045859/… che usa quell'articolo, un'alternativa a ciò che vuoi perché ciò che vuoi non è possibile.
97ldave

Risposte:


270

In realtà c'è un sapore speciale di @ font-face che permetterà proprio quello che stai chiedendo.

Ecco un esempio che utilizza lo stesso nome della famiglia di caratteri con stili e pesi diversi associati a caratteri diversi:

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

Ora puoi specificare font-weight:boldo font-style:italicsu qualsiasi elemento che desideri senza dover specificare la famiglia di caratteri o sovrascrivere font-weighte font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

Per una panoramica completa di questa funzionalità e dell'uso standard, dai un'occhiata a questo articolo.


ESEMPIO PENNA


1
proprio come ho suggerito nel mio commento sopra ;-)
97ldave

4
Nel mio caso, utilizza solo il carattere @ più basso. Questo sarebbe lo spessore del carattere: grassetto; stile del carattere: corsivo; ogni volta che mi riferisco alla famiglia di caratteri: 'DroidSerif';
Simon Arnold

1
Hai un test che dimostri che questo metodo funziona davvero? Come dimostreresti che il browser non sta solo simulando il peso o lo stile senza leggere il file del font corretto?
rojobuffalo

1
@rojobuffalo ecco un esempio di penna, funziona come previsto.
maioman

2
@rojobuffalo fa un punto molto valido. La penna non fa nulla per verificare la validità dell'asserzione che ciò si comporterà come previsto. Nello specifico, ho rimosso la dichiarazione in grassetto font-face dall'esempio CSS e l'ho eseguito di nuovo. L'aspetto era identico. Stava estraendo dalla cache? Il browser stava semplicemente manipolando il peso visualizzato del carattere normale?

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

17
Si prega di scrivere una piccola spiegazione sul motivo per cui questo risolverebbe il problema. Può essere qualcosa di semplice come una frase.
ggderas

3
Stessa soluzione della precedente. Notazione solo più breve :)
Mirka Nimsová

2
Dove posso leggere queste annotazioni? Non lo vedo su MDN
avalanche1

Non sembra funzionare e non riesco a trovare una risorsa, eppure sembra esserci del vero.
dakab
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.