Polices CSS (Polices)

Les attributs de police CSS vous permettent de définir divers styles pour les polices, tels que la série de polices du texte, la taille et la gras, les variantes, etc.

Attributs de police

Dans les styles CSS pour le texte, comme plusieurs attributs sont fournis :font-family，font-style，font-variant，font-weightetfont-size. La section suivante présentera ces attributs les uns après les autres.

Séries de polices

Lafont-familyL'attribut CSS vous permet de définir le nom de la série de polices du contenu texte, la liste de priorité d'utilisation des polices. La série de polices peut être :

Lafont-familyLes attributs peuvent contenir plusieurs noms de polices en tant queRemplacementPolices. D'abord, énumérez les polices que vous souhaitez utiliser, puis toutes les polices (si elles ne sont pas disponibles). Si le navigateur ne prend pas en charge la première police, il tentera la suivante. La déclaration de la série de polices peut être comme suit :

p　{
　　　　font-family: "Times New Roman", Times, serif;
}

Pour plus d'informations sur les combinaisons de polices courantes, veuillez consulter les polices sécurisées. Etc.

Style de la police

parfont-styleL'attribut définit le style du texte du contenu de l'élément.

Les valeurs possibles de cet attribut sont :normal，italicouoblique。

p.one　{
　　　　font-style:　normal;
}
p.two　{
　　　　font-style:　italic;
}
p.three　{
　　　　font-style:　oblique;
}

Taille du texte

font-sizeL'attribut définit la taille du texte du contenu texte de l'élément.

Il existe plusieurs méthodes pour spécifier la valeur de la taille du texte, par exemple, en utilisant les mots-clés, les pixels ou les ems.

Définir la taille du texte en utilisant les mots-clés

Il est possible de définir une taille absolue en utilisant l'un des mots-clés suivants sur l'élément body, ce qui permet de définir une taille relative pour le texte à d'autres endroits de la page, permettant ainsi de zoomer sur le texte dans tout le site de manière simple. Spécifiez une taille absolue en utilisant l'un des mots-clés suivants :xx-small，x-small，small，medium，large，x-large，xx-large。

La taille relative est spécifiée par l'un des mots-clés suivants :smaller、、larger。

body　{
　　　　font-size:　large;
}
h1　{
　　　　font-size:　larger;
}
p　{
　　　　font-size:　smaller;
}

Définir la taille du texte en pixels

Lorsque la précision en pixels est nécessaire, en utilisant des valeurs en pixels (par exemple12px,16px, etc.) Définir la taille du texte est une bonne option. Cependant, les résultats peuvent varier d'un navigateur à l'autre, car ils utilisent des algorithmes différents pour réaliser des effets similaires.

h1　{
　　　　font-size:　24px;
}
p　{
　　　　font-size:　14px;
}

Il est possible de définir la taille du texte en pixels, mais ce mode n'est pas très flexible, car les utilisateurs ne peuvent pas modifier la taille du texte via les paramètres du navigateur. Par exemple, les utilisateurs aux yeux faibles pourraient souhaiter augmenter la taille du texte au-delà de la taille spécifiée. Par conséquent, pour créer des conceptions, il est préférable d'éviter d'utiliser des valeurs en pixels pour la taille du texte.

Définir la taille du texte en em

emL'unité est la taille du texte du parent de l'élément.

emLa taille de la valeur est dynamique. Définiefont-sizel'attribut, an emest égal à la taille du texte appliquée au parent de l'élément.

Sifont-sizeDéfinir a sur l'élément body en20px, alors1em=20pxet2em=40px。

Si vous n'avez pas configuré la taille du texte nulle part sur la page, alors c'est la valeur par défaut du navigateur, c'est16px. Par conséquent, par défaut, c'est1em=16pxet2em=32px。

h1　{
　　　　font-size:　2em;　　　　/*　32px/16px=2em　*/
}
p　{
　　　　font-size:　0.875em;　　　　/*　14px/16px=0.875em　*/
}

Utiliser une combinaison de pourcentages et d'Em

Pour réaliser une solution similaire dans tous les navigateursfont-sizePour définir la valeur par défaut en pourcentage pour l'élément body. Une technique populaire estfont-sizeDéfinir le body en pourcentage.62.5%（c'est-à-dire par défaut16px62.5％），égal à10px ou 0.625em。

Maintenant, vous pouvez définirfont-sizeEn utilisant tout élément qui utilise des unités em, une conversion mémorablepxpar10Les valeurs sont10px=1em，12px=1.2em，14px=1.4em，16px=1.6em，etc. Voir l'exemple suivant :

body　{
　　　　font-size:　62.5%;　　　　/*　font-size　1em　=　10px　*/
}
p　{
　　　　font-size:　1.6em;　　　　/*　1.6em　=　16px　*/
}

Épaisseur de police

font-weightL'attribut spécifie l'épaisseur ou le gras de la police.

font-Les valeurs possibles de l'attribut style sont :normal，bold，bolder，lighter，100，200，300，400，500，600，700，800，900etinherit。

• Numérique100- 900La épaisseur de police spécifiée, chaque nombre représentant une épaisseur plus foncée que la précédente.400etnormal＆700identiquebold。

• debolderetlighter，et d'autres valeurs sont des valeurs de poids de police absolues qui sont par rapport à la épaisseur de police héritée.

p　{
　　　　font-weight:　bold;
}

Comme la plupart des polices ne peuvent être utilisées qu'avec un poids limité. Habituellement, elles ne sont disponibles queNormaletAffichage en gras。Si la police n'est pas disponible dans le poids spécifié, une police de remplacement sera sélectionnée, qui est la plus proche poids disponible.

Variante de police

font-variantLa propriété permet d'afficher le texte avec une forme de majuscules spéciale.

Lettres minuscules et majuscules ouLettres minuscules et majusculesUn peu différent de la lettre majuscule ordinaire, dans la lettre majuscule ordinaire, la lettre minuscule est affichée comme une version plus petite de la lettre majuscule correspondante.

font-variantLes valeurs des propriétés peuvent êtrenormal，small-capsetinherit。

p　{
　　　　font-variant:　small-caps;
}