Kerning de police CSS

Une feuille de style en cascade, CSS est le code de style composé de balises utilisées pour ajouter du style au contenu HTML qui est créé en utilisant les balises HTML. HTML et CSS sont connus pour avoir une importance dans la création et la conception du front-end des sites Web. Une feuille CSS contient plusieurs propriétés qui sont appliquées à chaque contenu HTML de manière spécifique. Le contenu HTML de base est le «texte». Comme nous le savons, chaque fois que nous voyons un site Web ou une page Web, des textes sont toujours présents sous la forme d'un paragraphe, d'un titre ou d'un lien.

Nous avons également vu les lettres élargies d'un seul mot pour nous aligner également sur toute autre phrase. Tout cela est dû à une propriété CSS liée au texte. Cet article expliquera le texte du contenu HTML et l'une des propriétés que nous devons appliquer au texte qui est une création de police.

Introduction à HTML et CSS

Une balise HTML contient deux sections: une tête et un corps . Tous les contenus HTML sont écrits à l'intérieur de la section corporelle des balises HTML. HTML contient principalement du contenu qui a à la fois des balises d'ouverture et de fermeture.

Talking CSS est dérivé de ses trois types: CSS en ligne, interne et externe. Le CSS interne est déclaré dans la section tête du corps HTML. Son explication supplémentaire est appliquée au moment de la mise en œuvre. De même, la propriété Font Kerning est appliquée dans l'étiquette de style de la tête. Tandis que le texte est déclaré à l'intérieur de la section du corps sous la forme d'un paragraphe ou d'une rubrique.

CSS Kerning Property of Font

Une création de polices est la propriété liée au texte. Une propriété de police est le style de texte qui comprend la couleur, le style de police, l'alignement, etc. De même, le coup de pouce est l'une des propriétés du texte CSS. Il est appliqué aux lettres de la parole de toute phrase. Il explique à quel point les lettres d'un mot sont espacées. La valeur duilage peut être un signe positif ou un signe négatif.

• Valeur positive: Une valeur positive de l'espacement des lettres fait que les personnages de lettres se propagent ou s'étendent plus loin. L'espace entre deux lettres est augmenté par la valeur que nous appliquons.
• Valeur négative: Un signe négatif avec une valeur de l'espacement des lettres rapproche le caractère les uns des autres en minimisant ou en excluant la distance entre le caractère au caractère également.

Une valeur d'espacement de lettre peut être fournie en différentes unités. Par exemple, les valeurs sont données en pixels, EM et dans une situation normale. Chaque unité a un effet différent. La valeur normale a le moins de différence d'espace par rapport à la police sans aucun effet deilage. L'effet de la valeur décimale est supérieur à la valeur du chiffre. La syntaxe de cette propriété est la suivante:

Police de police: valeur;

Autre que le créage des polices, nous pouvons également utiliser la propriété d'espacement des lettres. Maintenant, nous mettons en œuvre quelques exemples pour expliquer le concept de la création des polices.

Exemple 1: Différence avec et sans coupure

Dans cet exemple, nous avons utilisé la propriété d'espacement des lettres avec une valeur normale pour vérifier la différence entre les caractères qui n'ont pas appliqué l'effet de kerning et ceux qui ont appliqué cet effet.

Considérez la section corporelle du code HTML. Utilisez une étiquette d'en-tête pour déclarer une rubrique simple

. Ensuite, utilisez les balises de paragraphe. Les deux paragraphes sont appliqués avec le nom de la classe CSS. Ces noms de classes sont déclarés à l'intérieur de la balise de style de tête qui sera discutée plus tard.

Texte avec des polices de police.

De même, la deuxième balise de paragraphe est également déclarée.

Dans la balise de style, nous avons utilisé les deux cas qui sont déclarés dans les balises de paragraphe. La classe de coupage contient toutes les propriétés liées à la police, y compris la propriété normale de géage de police. Cette propriété de collaboration des polices fait référence à la valeur d'espacement des lettres qui est considérée comme normale. Ensuite, la famille des polices est appliquée comme serif et la propriété de taille est également appliquée au texte.

.Kerning
Kerning de police: normal;
Font-Family: Serif;
Taille de police: 20px;

Tandis que, sur la classe préoccupante, la propriété du rythme de police est considérée comme aucune. Cela signifie que le texte de ce paragraphe est déclaré sans changement dans l'espacement des lettres des mots.

.non-kerning
Font-Kerning: Aucun;

Le reste des propriétés restent les mêmes.

Enregistrez le code dans le fichier texte avec une extension HTML. Ce faisant, nous verrons que l'icône de fichier est transformée en l'icône du navigateur au lieu du symbole de l'éditeur. Exécuter ce fichier dans le chrome pour voir la sortie.

Vous verrez qu'il n'y a aucun effet dans le premier paragraphe où nous avons utilisé la propriété d'espacement des lettres ou l'effet de collaboration de police comme valeur normale. Lorsque nous comparons le premier paragraphe avec le deuxième paragraphe qui n'a aucun effet de coupure, nous ne trouvons aucun changement entre eux.

Exemple 2:

Cet exemple contient les différentes valeurs de la propriété d'espacement des lettres. Dans la balise du corps, nous avons utilisé cinq paragraphes et chaque paragraphe est déclaré avec une classe différente. Le nom de la classe révèle le fonctionnement des valeurs appliquées au moment de la déclaration. Dans chaque classe, une valeur différente est utilisée.

Par exemple, nous utilisons le «.Classe Em-Lider »avec une valeur 1EM. Cela rend le texte plus large que les autres. Tandis que le -0.09em rend le texte plus fort.

.EM-Tight
Espacement des lettres: -0.09EM;

Maintenant, enregistrez le code et nous verrons le résultat. Toutes les lignes sont affichées avec les différents espaces de lettres entre eux. Le premier paragraphe est le normal. Le quatrième paragraphe avec une valeur décimale négative a rapproché les lettres.

Exemple 3:

Cet exemple implique la propriété de la première ligne. Comme son nom l'indique, la propriété est mise en œuvre sur la première ligne. Un style en ligne est appliqué à ceux qui ont la propriété de largeur.

La balise de style contient la balise de première ligne paragraphe qui montre que seule la première ligne des deux paragraphes est affectée.