Plusieurs font-weights, une requête @ font-face

118

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 de les importer dans CSS avec une seule @font-face-query, où je définis le weightdans 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;
}
css fonts font-face Rvervuurt
la source
4
Ce n'est pas une police ... c'est plusieurs polices ... donc malheureusement, je pense que vous devriez simplement sourire et le supporter.
Paulie_D
Oui désolé, ce sont des polices différentes au sein de la même famille.
Rvervuurt
Plusieurs fichiers de polices Web === poids différents
Eric
2
cet article pourrait vous aider: 456bereastreet.com/archive/201012/… en fait il y a une réponse SO ici: stackoverflow.com/questions/10045859/… qui utilise cet article, une alternative à ce que vous voulez car ce que vous voulez n'est pas possible.
97ldave

Réponses:

270

En fait, il existe une saveur spéciale de @ font-face qui permettra exactement ce que vous demandez.

Voici un exemple utilisant le 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:boldou font-style:italicà tout élément de votre choix sans avoir à spécifier la famille de polices ou à remplacer font-weightet 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, consultez cet article.

EXEMPLE DE STYLO

Maioman
la source
1
comme je l'ai suggéré dans mon commentaire ci-dessus ;-)
97ldave
4
Dans mon cas, cela n'utilise que le plus petit @ font-face. Ce serait poids de la police: gras; style de police: italique; chaque fois que je fais référence à font-family: 'DroidSerif';
Simon Arnold
1
Avez-vous un test qui prouve que cette méthode fonctionne réellement? Comment prouveriez-vous que le navigateur ne simule pas simplement le poids ou le style sans lire le fichier de police correct?
rojobuffalo
1
@rojobuffalo voici un exemple de stylo, il fonctionne comme prévu.
maioman
2
@rojobuffalo fait un point très valable. Le stylo ne fait rien pour vérifier la validité de l'affirmation selon laquelle cela se comportera comme prévu. Plus précisément, j'ai supprimé la déclaration de police en gras de l'exemple CSS et l'ai exécutée à nouveau. L'apparence était identique. Tirait-il du cache? Le navigateur a-t-il simplement manipulé le poids affiché de la police 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;
}
Mirka Nimsová
la source
17
Veuillez écrire une petite explication sur les raisons pour lesquelles cela résoudrait le problème. Cela peut être quelque chose de simple comme une phrase.
ggderas
3
Même solution que la précédente. Notation plus courte :)
Mirka Nimsová
2
Où puis-je lire ces notations? Ne le voyez pas sur MDN
avalanche1
Cela ne semble pas fonctionner et je ne trouve pas de ressource, mais il semble y avoir du vrai.
dakab le