Polices CSS
Familles de polices génériques en CSS
Il existe cinq types de familles de polices dans CSS I.e. Serif, Sans-Serif, Monospace, Fantasy et Cursive. Toutes ces familles de polices sont utilisées pour spécifier l'apparence / la forme des polices:
- Fonts Serif avoir de petits coups élégants au bord des lettres
- Sans-serif Les polices ont des lettres simples, pas de trait. Ces polices sont facilement lisibles.
- Monospace Les polices sont des lettres de largeur fixe à pas fixe. Principalement utilisé pour représenter le code de programmation
- Cursive Les polices sont très similaires à l'écriture humaine
- Fantaisie Les polices ont un look décoratif / fantaisie
Différence visuelle des familles de polices génériques
Suivre l'extrait fournira une ligne directrice pour comprendre la différence de formes des familles de polices génériques
Divers types de familles de polices génériques
Le chiffre donné ci-dessous présente les différents types de chaque famille de polices génériques:
Propriétés de la police CSS
Dans CSS, l'apparence du texte peut être modifiée de plusieurs manières comme la sélection du style de police, la famille des polices, la couleur de la police, la taille de la police, etc. Comme l'utilisation correcte de la police a un grand impact sur le texte et l'expérience du lecteur, CSS fournit donc de nombreuses propriétés de police qui peuvent être utilisées pour personnaliser l'apparence des polices. Cet article ciblera les propriétés de police suivantes:
- famille de polices
- le style de police
- variante de police
- taille de police
- poids de police
- sténographie de police
Commençons par la famille des polices.
Famille CSS
Cette propriété est utilisée pour spécifier la famille des polices pour tout élément HTML E.g. «Arial», «Times New Roman», etc. Ou nous pouvons utiliser une famille de polices génériques E.g. Serif, cursif, etc.
Exemple
L'exemple donné ci-dessous utilise les polices Serif pour le
élément et polices cursives pour le
éléments:
Html
Polices CSS
Premier paragraphe
La deuxième paragraphe
CSS
H3Font-Family: «Times New Roman», Times, Serif;
p
Font-Family: Cursive;
Le morceau de code ci-dessus affiche la sortie suivante:
Style de police CSS
Pour définir un style spécifique pour un élément HTML, la propriété de style police est utilisée. La propriété de style police peut avoir une valeur normale, oblique ou italique.
Exemple
Dans le code de code ci-dessous, le style de police de
L'élément est changé en style italique:
Html
Polices CSS
Premier paragraphe
La deuxième paragraphe
CSS
H3Style de police: italique;
L'extrait ci-dessus montre le résultat suivant:
Les valeurs obliques et normales peuvent être utilisées pour la propriété de style police, la valeur oblique produira des résultats très similaires au style italique.
CSS Font-Variant
Il peut prendre une valeur «petits capitalisations» qui convertit les lettres en petites lettres majuscules (majuscules mais plus petites).
Exemple
Le code indiqué ci-dessous démontrera l'effet de la propriété variante de police sur le
élément:
Html
Polices CSS
Premier paragraphe
La deuxième paragraphe
CSS
pFont-Variant: Small-Caps;
Le code ci-dessus fournira le résultat suivant:
Taille de police CSS
La propriété de la taille de la police est surgée pour régler la taille du texte et la valeur de la taille de la police peut être spécifiée comme petit, grand, moyen, etc., ou en termes de PX, EM,%, etc.
Le code donné ci-dessous spécifie la taille de la police pour le
élément comme extra-large:
Html
Polices CSS
Premier paragraphe
La deuxième paragraphe
CSS
ptaille de police: X-plus;
L'extrait ci-dessus génère le résultat suivant:
La sortie vérifie que le texte de
Les éléments sont plus grands que la taille normale de la police.
CSS Police-Weight
La propriété de poids de police est utilisée pour définir le poids de police en termes de valeurs spécifiques comme audacieux, normal, plus léger, etc. Il peut déterminer le poids en termes de valeur numérique comme 100, 200, 300, etc. La plus grande valeur spécifie une police plus audacieuse / plus épaisse tandis que la valeur plus petite représente la police plus mince.
Le morceau de code suivant définit le poids de police pour le
élément utilisant la valeur «plus audacieuse»:
Html
Polices CSS
Premier paragraphe
La deuxième paragraphe
CSS
pPolice-poids: plus audacieux;
L'extrait ci-dessus produit la sortie suivante:
Propriété saccorde de police dans CSS
CSS fournit une propriété raccourci pour toutes les propriétés susmentionnées. Utilisation du raccourci "Police de caractère" propriété Nous pouvons définir le style de police, la famille, la variante, etc. en une seule ligne.
L'exemple donné ci-dessous montre comment utiliser des propriétés scolaristes de police dans CSS:
Html
Polices CSS
Premier paragraphe
La deuxième paragraphe
CSS
pPolice: Bold 30px cursive;
L'extrait ci-dessus spécifie le poids de police, la taille de la police et la famille dans une seule déclaration à l'aide de la propriété raccourci de police:
La sortie ci-dessus vérifie que la propriété raccourci établit avec succès le poids, la taille et la famille de la police pour le
élément.
Conclusion
Les familles de polices déterminent la forme des polices, tandis que le style de police, les propriétés de poids, la taille de la police et les propriétés de police déterminent respectivement le style, le poids, la taille et l'effet des petites capitales des polices. Toutes ces fonctionnalités peuvent être effectuées sur les polices dans une seule déclaration en utilisant une propriété «Font» scolarisée.
Cet article présente un aperçu complet de ce que sont les polices CSS, les familles de polices génériques et comment définir le style de la police.