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
source

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

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
source

comme je l'ai suggéré dans mon commentaire ci-dessus ;-)

— 97ldave

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

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

@rojobuffalo voici un exemple de stylo, il fonctionne comme prévu.

— maioman

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

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

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

Même solution que la précédente. Notation plus courte :)

— Mirka Nimsová

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