Dans le passé, modifier la police d'une page Web signifiait généralement imbriquer le texte pertinent dans la balise <tag> et utiliser des attributs pour contrôler sa couleur, sa taille et son style. Aujourd’hui, cette approche n’est plus reconnue car elle mélange le style visuel avec le balisage réel du contenu. Aujourd'hui, nous recommandons la méthode consistant à concentrer les informations sur le style de police dans un fichier séparé appelé feuille de style en cascade (CSS).
La concentration des informations sur les polices dans un seul fichier CSS présente de nombreux avantages évidents : elle est facile à utiliser, ne nécessite aucun logiciel spécial et fonctionne de manière uniforme dans la plupart des principaux navigateurs. De plus, puisque les informations sont centralisées en un seul endroit, il est facile de modifier l'apparence visuelle d'une page Web : vous pouvez simplement changer la police ou la couleur de la feuille de style principale, et les modifications se répercuteront instantanément sur l'ensemble de votre page Web. site.
Ça a l'air amusant, non ? Alors continuez à lire car dans cet article, je discuterai de la propriété de police CSS, qui est conçue pour remplacer l'ancien élément <font>. Si vous avez besoin d'un contrôle centralisé sur la police, la couleur, la taille du texte et l'espacement de votre page HTML, c'est le cas. Un outil puissant dont il faut profiter.
type de contrôle
L'attribut font définit la police utilisée par l'élément correspondant. Cette propriété contient généralement une liste de noms de polices séparés par des virgules ; les noms contenant des espaces peuvent être placés entre guillemets. Une fois appliqué, le navigateur utilisera la première police trouvée dans la liste, ou la police standard par défaut du navigateur si aucune police valide n'est trouvée.
Le listing A est un exemple d’application de cette instruction :
Liste A
<html> <tête> <style type="text/css"> .citation { famille de polices : "Bookman Old Style", "Verdana" ; } </style> </tête> <corps> <div class="quote">Etre ou ne pas être, telle est la question.</div> </corps> </html> |
La figure A montre le résultat.
Figure A
Famille_font
Il est important de se rappeler que cette directive dépend beaucoup des polices affichées par le système client ; dans l'exemple ci-dessus, si le système n'affiche pas les polices Bookman Old Style et Verdana, la police par défaut du navigateur sera utilisée. Pour éviter ce problème, il est préférable d'ajouter une liste de noms de polices génériques, tels que serif, sans-serif ou cursive, après la liste des noms de polices spéciales, cela indique au navigateur d'utiliser la police la mieux adaptée à cette classe de polices ; . Le listing B est une version révisée de l'exemple ci-dessus qui résout exactement le problème ci-dessus.
Liste B
<html> <tête> <style type="text/css"> .citation { famille de polices : "Bookman Old Style", "Verdana", "cursive" ; } </style> </tête> <corps> <div class="quote">Etre ou ne pas être, telle est la question.</div> </corps> </html> |