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

454

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?

Felix
la source
Comme extension à la question si nous utilisons ces polices dans les éditeurs WYSIWYG comme TinyMCE, avons-nous toujours besoin des italiques gras? Bien que le TinyMCE ait des boutons pour faire des caractères italiques audacieux? Ma réponse est OUI - parce qu'intérieurement ils recherchent ces fichiers?
Nishant
doublon possible de Comment fusionner les polices?
user2284570

Réponses:

749

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.)

Felix
la source
130
L'ordre est important, le style gras / italique doit venir en dernier.
The Who
8
Il convient de noter que cela ne fonctionne pas dans IE8 (et ci-dessous), même si vous utilisez un EOT. IE téléchargera la police de caractères alternative, mais il ne l'utilisera pas, à la place, il fera un faux-gras / italique la police de caractères normale. De plus, Chrome 11 semble ne pas réussir à rendre une police à la fois en gras et en italique
JaffaTheCake
2
Cet exemple fonctionne parfaitement pour les polices qui ont un fichier TTF distinct pour le gras et l'italique. Mais que se passe-t-il si la police entière se trouve dans un seul fichier .ttf et que vous souhaitez utiliser du gras, comment cela fonctionne-t-il?
2
Cet article explique très bien pourquoi cela fonctionne. Extrait clé: "Notez que la propriété font-family est le même nom pour les quatre polices. En outre, le style de police et le poids de police correspondent à la police. Remarque: le poids normal doit être en haut de la liste! Nous n'avons pas constaté que l'ordre après cela était important. "
JD Smith du
13
J'avais des problèmes avec cette capture sur le navigateur intégré Android 4.4. Fini de changer font-style: italic, oblique;pour font-style: italic;sembler tout réparer.
Xavi
59

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.

Josiah
la source
Je crois que les troisième et quatrième polices sont mal nommées, elles devraient avoir "Italique" au lieu de "Oblique".
Nathan Merrill
3
@NathanMerrill as by OP: I have separate files for bold, italic and bold + italic- donc il y a trois fichiers différents. Cette réponse corrige celle acceptée en ce qu'elle font-style: italic, oblique;n'est plus valide, mais aussi que cette réponse utilisait le même fichier pour l'italique et l'oblique. Néanmoins, il convient de souligner que le fichier est partagé dans deux cas.
Silly Freak
18

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");
}
Cedric Simon
la source
Très utile. +1
M. Polywhirl
Qu'entendez-vous par «inverser l'ordre» ?
Nyxynyx
15

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');
}
xlaoyu.Lee
la source
13

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é.

Dieter Gribnitz
la source
3
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}
Jerry T
la source
1

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

Ooker
la source
Pas très lié au problème et @font-face, donc j'essaie de minimiser cette réponse (mais je ne peux pas, je n'ai pas assez de réputation)
FryingggPannn
oui, ce n'est pas une réponse à la question, mais une bonne chose à retenir lors de l'application des réponses. Le problème est que la section commentaire de la réponse en a déjà beaucoup, donc cette astuce serait enterrée
Ooker
Ok alors je ne savais pas que
FryingggPannn