web-dev-qa-db-fra.com

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

Je regarde page MDC pour la règle CSS @ font-face , mais je ne comprends rien. J'ai des fichiers séparés pour gras , italique et gras + italique . Comment incorporer les trois fichiers dans une règle @font-face? 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 en gras (parce que ce fichier est DejaVuSansBold.ttf), il sera donc 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 police donnée?

cssfontscss3font-face
411
Felix

La solution semble être d'ajouter plusieurs règles @font-face, 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;
}

En passant, il semblerait que Google Chrome ne connaisse pas l'argument format("ttf"), vous pouvez donc l'ignorer.

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

689
Felix

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

@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 les règles obliques ne seront pas nécessaires si vous prenez soin de définir celle que vous utiliserez et de vous y tenir.

53
Josiah

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");
}
12
Cedric Simon

Si vous utilisez des polices Google, je vous suggérerais ce qui suit.

Si vous voulez que les polices soient exécutées à 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 font-face similaire à la première réponse.

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

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

12
Dieter Gribnitz

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

@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');
}
10
xlaoyu.Lee
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}
1
Jerry T