Comment puis-je intégrer plusieurs variantes de police (gras, italique) dans une seule règle @font-face ?

Plusieurs variantes de police dans une seule règle @font-face

En CSS, la règle @font-face vous permet d'intégrer des polices personnalisées dans une page Web. Cependant, lorsque vous travaillez avec plusieurs variantes de police (par exemple, gras, italique, gras italique), il peut être difficile de savoir comment les spécifier dans une seule règle.

Pour intégrer plusieurs fichiers de polices pour la même police, vous pouvez utilisez plusieurs règles @font-face. Par exemple, si vous avez des fichiers distincts pour DejaVu Sans gras, italique et gras 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, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

Dans l'exemple ci-dessus, chaque règle @font-face spécifie une variante de police différente. Lorsqu'un navigateur Web rencontre une déclaration de style de police (par exemple, font-weight : bold), il chargera le fichier de police correspondant et appliquera le style approprié.

Notez que Chrome ne reconnaît pas le format("ttf ") dans l'exemple ci-dessus, il peut donc être omis. De plus, CSS3 n'autorise qu'une seule déclaration de style de police par règle @font-face, plutôt qu'une liste séparée par des virgules comme indiqué dans l'exemple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!