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

Incorporation de plusieurs variantes de polices avec @font-face

En CSS, la règle @font-face vous permet d'intégrer des polices personnalisées dans votre pages Web. Cependant, que se passe-t-il si vous disposez de plusieurs variantes de la même police, comme le gras, l'italique ou les deux ? Comment pouvez-vous vous assurer que le navigateur charge et utilise la bonne variante ?

La solution consiste à créer plusieurs règles @font-face, chacune spécifiant la variante souhaitée. Par exemple, pour intégrer DejaVu Sans dans des variantes gras et italiques :

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

Ce code garantit que lorsque vous définissez la famille de polices sur "DejaVu Sans" et appliquez les styles gras et/ou italique, le navigateur chargera la variante appropriée de la police.

Notez que l'argument format("ttf") est facultatif et peut ne pas être nécessaire dans tous les navigateurs. CSS3 a également introduit une syntaxe simplifiée pour spécifier les styles de police. Au lieu d'utiliser plusieurs règles @font-face, vous pouvez utiliser une liste de valeurs de poids de police et de style de police séparées par des virgules dans une seule règle :

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

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!