HTML5 - Utilisation des polices - Partie1

L'un des aspects fondamentaux lorsque l'on travaille avec du texte dans HTML sont les changements d'image qui peuvent se produire simplement en changeant la police des lettres, cependant il y a deux aspects des professionnels qui travaillent en relation avec cela, les concepteurs qui veulent changer chaque aspect de la typographie et les programmeurs qui, bien qu'ils veuillent en travaillant avec eux, ils ne veulent pas faire de changements aussi profonds à ce sujet.
Propriétés de la police
Avant de travailler avec les sources, nous allons passer en revue leurs propriétés pour en connaître le contexte :

• famille de polices: Spécifie la famille de polices d'un bloc de texte.
• taille de police: Spécifie la taille de police d'un bloc de texte.
• le style de police: Spécifie le style de la police, il peut être normal, italique, oblique.
• police-variante : Spécifie si le texte du bloc peut être affiché en police smallcaps, ses valeurs possibles sont smallcaps et normal.
• font-weight : Spécifie le poids de la police pour un bloc de texte, c'est-à-dire son épaisseur, ses valeurs peuvent être normales, gras, plus gras, plus légers,.
• Police de caractère: Raccourci qui vous permet de spécifier la police en une seule ligne.

Sélection d'une source
Propriété famille de polices Nous déterminons le groupe de polices qui sera utilisé en établissant un ordre de préférence afin que si une n'est pas disponible, elle soit passée à celle qui suit par ordre de préférence. Le navigateur commence par la première police de la liste et continue d'essayer pour chacune des polices dans l'ordre établi jusqu'à ce qu'il y en ait une qu'il puisse utiliser.
Cela se produit parce que nous pouvons avoir besoin d'utiliser des polices installées sur le PC d'un utilisateur ou qui appartiennent à un système d'exploitation spécifique, de sorte que si un autre utilisateur ne répond pas aux exigences, nous pouvons contrôler comment cela affectera notre document.
Enfin, voyons une liste de polices génériques qui devraient être disponibles de manière standard pour tous les systèmes et avec lesquelles nous ne devrions pas avoir de problèmes.

• empattements
• sans empattement
• cursive
• fantaisie
• monospace

Très bien puisque nous avons couvert l'aspect théorique de ce qu'est la gestion des sources, voyons des exemples avec du code, c'est là que nous obtiendrons nos connaissances sur la façon de mettre en pratique tout ce que nous avons étudié :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Dans ce code, nous voyons qu'une police non conventionnelle a été définie dans la font-family puisqu'il s'agit d'une police propriétaire HelveticaNeue Condensé et ensuite, en deuxième préférence, nous plaçons monospace Voyons comment nous pouvons voir cela dans le navigateur, pour chacun des cas définis.
[pièce jointe = 861 : html5fuentes.jpg.webp]
Sur la gauche de l'image, nous avons le cas dans lequel la police qui a été placée comme premier choix n'existe pas, c'est-à-dire la police monospace, sur le côté droit, nous voyons la police propriétaire.
Avec cela, nous terminons le tutoriel, après avoir connu les fondements théoriques et les avoir mis en pratique, nous sommes maintenant en mesure de jouer un peu avec les sources de notre application et d'obtenir des résultats plus attrayants visuellement et conformes à ce que nous voulons.
Vous pouvez continuer à lire la partie 2 de ce didacticiel.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif