Comment puis-je inclure plusieurs variantes de police (gras, italique) à l'aide de @font-face de CSS ?

Inclure plusieurs variantes de polices avec CSS @font-face

La règle CSS @font-face permet aux développeurs Web d'intégrer des polices personnalisées dans leur dessins. Cependant, cela peut devenir difficile lorsqu'il s'agit de plusieurs variantes de la même police, telles que le gras, l'italique et l'italique gras. Cet article explique comment incorporer ces variantes à l'aide de la règle @font-face.

Dans la règle @font-face, la propriété src fait généralement référence à un seul fichier de police. Cependant, en créant plusieurs règles @font-face, les développeurs peuvent définir des variantes de la même police avec leurs noms de fichiers respectifs.

Par exemple, considérons la famille de polices DejaVu Sans avec des fichiers séparés pour le gras, l'italique et le gras. italique. Le code CSS suivant montre comment intégrer ces variantes à l'aide de plusieurs règles @font-face :

@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;
}

En créant des règles @font-face distinctes pour chaque variante, le navigateur est informé de la disponibilité de différents styles de police. au sein de la même famille de polices. Il peut ensuite charger le fichier de police approprié en fonction des valeurs font-weight et font-style spécifiées dans la déclaration CSS.

Il est à noter que certains navigateurs peuvent ne pas reconnaître l'argument format("ttf") dans la propriété src. En cas de problèmes de compatibilité, il est recommandé d'omettre ce paramètre.

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!