web-dev-qa-db-fra.com

Plusieurs polices de caractères, une requête @ font-face

Je dois importer la police Klavika et je l'ai reçue sous plusieurs formes et tailles:

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

Maintenant, j'aimerais savoir s'il est possible d'importer ceux-ci dans CSS avec un seul @font-face _ requête, où je définis le weight dans la requête. Je veux éviter de copier/coller la requête 8 fois.

Donc, quelque chose comme:

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

En fait, il existe une saveur particulière de @ font-face qui permet exactement ce que vous demandez.

Voici un exemple d'utilisation du même nom de famille de polices avec différents styles et poids associés à différentes polices:

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

Vous pouvez maintenant spécifier font-weight:bold ou font-style:italic à l’un des éléments de votre choix sans spécifier la famille de polices ni remplacer font-weight et font-style.

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

Pour un aperçu complet de cette fonctionnalité et de l’utilisation standard, jetez un oeil à cet article

EXEMPLE PEN

193
maioman
@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;
}
2
Mirka Nimsová