Comment intégrer plusieurs variantes de polices à l'aide de @font-face ?

Comment intégrer plusieurs variantes de polices avec @font-face

Lorsque vous utilisez @font-face pour intégrer des polices personnalisées, cela peut être utile pour prendre en charge plusieurs variantes, telles que le gras, l'italique et une combinaison des deux. Voici une explication détaillée sur la façon d'incorporer plusieurs fichiers de polices pour la même police :

Création de règles @font-face pour chaque variation

Pour intégrer différentes variantes d'une police , créez des règles @font-face distinctes pour chaque variante. Par exemple, pour une famille de polices nommée « DejaVu Sans », vous créerez les règles suivantes :

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

Attribution de variantes de police aux éléments HTML

Une fois le @ les règles de police de caractères sont définies, vous pouvez attribuer les différentes variantes aux éléments HTML à l'aide des propriétés font-weight et font-style. Par exemple :

strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

Cela appliquera la variation en gras de la police DejaVu Sans à tous les éléments forts.

Remarque :

• Il est important de créer des règles @font-face distinctes pour chaque variante, car le navigateur ne peut pas comprendre automatiquement la relation entre les fichiers.
• Le L'argument "format()" n'est pas pris en charge par tous les navigateurs, il est donc recommandé de l'omettre.
• CSS3 n'autorise qu'une seule valeur de style de police, contrairement à CSS2, qui prenait en charge une liste séparée par des virgules.

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!