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

css fonts font-face

— Rvervuurt
fonte

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

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

— maioman
fonte

proprio come ho suggerito nel mio commento sopra ;-)

— 97ldave

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

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

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

— maioman

@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?

@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á
fonte

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

— ggderas

Stessa soluzione della precedente. Notazione solo più breve :)

— Mirka Nimsová

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