Comment utiliser au mieux les polices en CSS?

Cet article vous présentera un sujet simple mais important, celui des polices et vous fera également une démonstration pratique sur le sujet. Les pointeurs suivants seront traités dans cet article,

• Polices en CSS
• Attributs dans la police CSS
• attribut de style de police
• attribut font-weight
• attribut font-size
• attribut font-family

Les sites Web proposent du contenu sous forme d'images, audio, vidéo et textuel. Cependant, la plupart des pages Web utilisent toujours le texte comme format prédominant. En effet, le texte brut offre des avantages très importants.

Lisibilité non intrusive - Vous souhaitez vérifier le dernier score de match au bureau. Évidemment, vous voulez une mise à jour rapide du texte, pas une vidéo bruyante!
Faible exigence de bande passante réseau - Le contenu textuel peut être chargé même dans les zones de mauvaise connectivité Internet, contrairement aux médias riches.
Recherche conviviale - Les sites Web gardent toujours un œil sur la facilité avec laquelle leur contenu est remarqué sur les moteurs de recherche. Le texte est le mieux adapté pour cela, du moins jusqu'à ce que l'IA prenne complètement le dessus sur Internet!

Lors de la mise en forme du contenu du texte, les concepteurs Web n'ont que peu de paramètres sur lesquels travailler - police, alignement, mise en évidence et couleur. La sélection de la bonne police pour votre texte est un choix critique. La pratique standard consiste à utiliser des balises de police CSS pour définir les polices du texte dans les pages HTML.
Si vous êtes nouveau dans le monde de la programmation HTML, obtenez une visite de base de base ici. Vous voudrez peut-être lire les bases de CSS avant de vous familiariser avec les polices CSS.

Pour un didacticiel CSS complet, visitez le didacticiel CSS Edureka pour les débutants. Vous aurez un excellent aperçu de la façon dont CSS doit être utilisé pour augmenter la conception Web HTML.

Continuez avec cet article sur les polices en CSS

Polices en CSS

Une police est essentiellement un ensemble de caractéristiques associées à l'affichage de texte. Les polices sont différenciées les unes des autres par leur taille, leur indentation, leur largeur, leur inclinaison, etc. Commençons par un affichage de texte de base dans différentes polices.

Exemple 1: titres et paragraphes dans différentes polices

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Le paragraphe en italique et gras Georgia
 

 Exemple 1: sortie 

Dans l'exemple 1, nous avons 3 lignes de texte différentes dans différentes polices. Vous remarquerez que chacune des polices varie dans leurs largeurs de caractères, indentations, etc.

Continuez avec cet article sur les polices en CSS

Attributs dans la police CSS

Les polices CSS ont 4 attributs principaux: style, poids, taille et famille. L'attribut style indique normal ou italique. Le poids affiche la police en clair ou en gras. Le poids peut également être exprimé numériquement. La taille est simplement la taille de la police plus grande la taille, plus le texte en apparence. Il existe plusieurs façons d'attribuer la taille de la police, des descriptions détaillées sont données dans les sections suivantes. L'attribut de la famille consiste à attribuer le nom de la police au texte.

Dans l'exemple 1, nous avons utilisé des noms de police différents pour les en-têtes et les paragraphes. Sous les balises h1 et p, nous voyons deux noms de police répertoriés, tandis que la balise h2 ne nomme qu'une seule police. Ceci est la définition d'une famille de polices, nous en parlerons plus tard.

Continuez avec cet article sur les polices en CSS

attribut de style de police:

Les deux styles principaux pouvant être définis sont «normal» et «italique». Les italiques sont censés être de nature cursive avec une inclinaison. Normal est l'option par défaut qui est directe. Il existe une autre option moins utilisée appelée «oblique», qui ressemble à l’option italique dans la plupart des polices. Vous pouvez également définir le style sur 'hériter' afin qu'il prenne le style de police de son élément parent.

Continuez avec cet article sur les polices en CSS

Attribut font-weight:

Cet attribut décide si la police doit apparaître épaisse ou fine. Il peut être défini sur «normal» ou «gras». La valeur par défaut est normale. Cette valeur peut également être définie comme numérique. Un poids de 400 représente la normale et 700 correspond au gras. Il existe peu d'autres paramètres (allant de 100 - très léger à 900 - très gras), mais ils ne sont pas pris en charge par toutes les polices. Toutes les options de poids sont présentées dans l'exemple 3.

Continuez avec cet article sur les polices en CSS

attribut font-size:

L'attribut size peut être défini de plusieurs manières. Voyons ces méthodes ci-dessous.
● Valeur énumérée telle que «moyen», «grand». En fait, tout comme les tailles de vêtements, les valeurs peuvent aller de XX Small à XX Large!
● Défini par rapport à son élément parent, comme 'plus grand' ou 'plus petit'.
● Pourcentage de la taille de l'élément parent.
● Définir comme 'hériter' pour adopter directement la taille de l'élément parent.
● En valeur absolue dans les unités de px (pixels), pt (points) ou cm (centimètre)
«Medium» est la valeur par défaut définie pour ce paramètre.

Continuez avec cet article sur les polices en CSS

attribut font-family:

En HTML, la famille de polices CSS sert à définir le nom de la police. Vous pouvez soit simplement mettre un seul nom de police avec la balise. Vous pouvez également attribuer plusieurs valeurs sous forme de liste de familles de polices définissant la priorité dans laquelle le navigateur doit choisir la police.
La liste est priorisée de gauche à droite, sous la forme d'un système de repli. La première valeur, si disponible, est choisie, ou le contrôle passe à la suivante, jusqu'à ce que la fin de la liste soit atteinte. La famille de polices par défaut est définie par les préférences du navigateur.
Les familles de polices CSS sont de 2 types: les familles génériques et les familles de polices.
● Familles génériques - en fonction de certaines caractéristiques générales, les polices sont regroupées sous les formes «serif», «sans serif», «monospace», etc. Par exemple, Sans serif signifie les polices sans le style serif.
● Noms de famille - polices appartenant à des hiérarchies de familles spécifiques. Times, Arial, Courier sont toutes des familles de polices et Times New Roman est un exemple de police de la famille Times.
Les différentes options d'utilisation des familles de polices sont répertoriées dans l'exemple 4 ci-dessous.

Quelques points communs à noter

● Comme plusieurs autres propriétés CSS, certains paramètres de police varient selon les navigateurs. Vérifiez la prise en charge du navigateur avant d'utiliser certains paramètres de police rares.
● Vous pouvez définir les paramètres de police séparément à l'aide des balises individuelles de style de police, d'épaisseur de police, etc. Sinon, si vous préférez le code compact, vous pouvez utiliser l'attribut de police abrégée avec toutes les valeurs sur la même ligne.
● Dans les scénarios utilisateur où vous souhaitez que la taille de la police varie en fonction de la taille du navigateur, il existe un paramètre de taille de police utile appelé paramètre de police réactif. Il peut être défini avec une unité vw, ce qui signifie «largeur de la fenêtre». De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur.

J'espère que vous avez trouvé les informations que vous recherchiez sur Fonts In CSS. Partagez votre expérience avec nous dans la section commentaires ci-dessous. Bonne conception!

Si vous souhaitez en savoir plus sur le développement Web, consultez le par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).