Comment ajouter plusieurs fichiers de polices pour la même police?

Je regarde la page MDC pour la règle CSS @ font-face , mais je n'ai pas une chose. J'ai des fichiers séparés pour gras , italique et gras + italique . Comment puis-je intégrer les trois fichiers dans une seule @font-facerègle? Par exemple, si j'ai:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

Le navigateur ne saura pas quelle police utiliser pour les caractères gras (car ce fichier est DejaVuSansBold.ttf), donc il prendra par défaut quelque chose que je ne veux probablement pas. Comment puis-je indiquer au navigateur toutes les différentes variantes que j'ai pour une certaine police?

La solution semble être d'ajouter plusieurs @font-facerègles, par exemple:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

Soit dit en passant, il semblerait que Google Chrome ne soit pas au courant de l' format("ttf")argument, vous pouvez donc ignorer cela.

(Cette réponse était correcte pour la spécification CSS 2. CSS3 n'autorise qu'un seul style de police plutôt qu'une liste séparée par des virgules.)

Depuis CSS3, la spécification a changé, ne permettant qu'un seul font-style. Une liste séparée par des virgules (selon CSS2) sera traitée comme si elle l'était normalet remplacera toute entrée antérieure (par défaut). Les polices ainsi définies apparaîtront en italique de façon permanente.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

Dans la plupart des cas, l'italique sera probablement suffisant et des règles obliques ne seront pas nécessaires si vous prenez soin de définir celui que vous utiliserez et de vous y tenir.

Pour que la variation de police fonctionne correctement, j'ai dû inverser l'ordre de @ font-face en CSS.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

de nos jours, 2017-12-17. Je ne trouve aucune description de la nécessité de Font-property-order dans spec . Et je teste en chrome fonctionne toujours quelle que soit la commande.

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

Si vous utilisez des polices Google, je suggère ce qui suit.

Si vous souhaitez que les polices s'exécutent à partir de votre hôte local ou de votre serveur, vous devez télécharger les fichiers.

Au lieu de télécharger les packages ttf dans les liens de téléchargement, utilisez le lien en direct qu'ils fournissent, par exemple:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

Collez l'URL dans votre navigateur et vous devriez obtenir une déclaration de police similaire à la première réponse.

Ouvrez les URL fournies, téléchargez et renommez les fichiers.

Collez les déclarations de police mises à jour avec les chemins d'accès relatifs aux fichiers woff dans votre CSS, et vous avez terminé.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

N'oubliez pas que pour une variante audacieuse, c'est font-weight; pour la variante italique, il estfont-style