CSS

Mise en forme du texte

Laisser un commentaire

Le CSS a été conçu pour mettre en forme les sites web tandis que le HTML a été pensé pour créer les structures des sites web. Parmi les possibles mises en forme du CSS nous retrouvons celle du texte.

Familles de polices génériques

CSS défini 3 familles de polices génériques (ensemble de polices ayant un look similaire), connues de tous les navigateurs :

  • La famille de police Serif dont certains caractères se terminent par de petites barres, telles que Times New Roman ou Georgia
     
  • La famille de police Sans-serif, c’est à dire « sans » terminaisons, telles que Verdana ou Arial
     
  • La famille de police Monospace, dont toutes les lettres ont la même largeur, telle que Courier New
     

Remarque : les polices sans-serifs sont généralement plus faciles à lire sur un écran d’ordinateur

Famille de police du texte

Défini une liste de polices à utiliser pour l’affichage d’un texte. Le navigateur utilisera la première police qu’il connait.

Il est conseillé de commencer par la police voulue, puis par les polices à utiliser si celle demandée n’est pas connue par le navigateur, et enfin de terminer avec une famille générique.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>font-family: "Times New Roman", Times, serif;</h1>
   <h2>font-family: Georgia, serif;</h2>
   <h3>font-family: Arial, Helvetica, sans-serif;</h3>
   <h4>font-family: "Comic Sans MS", cursive, sans-serif;</h4>
   <p>font-family: "Courier New", Courier, monospace;</p>
   <b>font-family: "Lucida Console", Monaco, monospace;</b>
   
</body>
</html>
h1{
    font-family: "Times New Roman", Times, serif;
}
h2{
    font-family: Georgia, serif;
}
h3{
    font-family: Arial, Helvetica, sans-serif;
}
h4{
    font-family: "Comic Sans MS", cursive, sans-serif;
}
p{
    font-family: "Courier New", Courier, monospace;
}
b{
    font-family: "Lucida Console", Monaco, monospace;
}

Comment ajouter des polices d’écriture en CSS

Tout comme choisir une police d’écriture (ou “typographie”), en ajouter une grâce au CSS est un art. Nous allons voir comment faire cela à travers deux méthodes simples et efficaces.

Première méthode : depuis un service externe

Pour commencer, rendez-vous sur le site  google font. Vous pouvez vous balader sur le site jusqu’à trouver la police d’écriture qui vous tape dans l’œil ou utiliser le formulaire de recherche présent en haut du site.

Cliquer sur la police que vous avez choisie vous enverra sur sa page. Là, il vous est présenté tous les styles disponibles : le poids (épaisseur) et l’italique. Pour chaque style que vous allez utiliser sur le site, cliquer sur “+ Select this style”, ce qui va l’ajouter dans la fenêtre à droite du site.
Attention, ne prenez que les polices et les styles dont vous avez besoin ; en choisir trop alourdira le temps de chargement, ce qui peut nuire considérablement au référencement.

Une fois la sélection terminée, concentrons-nous sur la fenêtre latérale droite. De haut en bas, vous y trouverez :

  • La liste des polices d’écriture et des styles choisis. Vous pouvez les retirer en cliquant sur le bouton “-” ou “Remove all”.
  • La balise style pour ajouter ces polices d’écriture à votre CSS.
  • Le code CSS pour utiliser les polices d’écriture.

Il vous suffit à présent de copier la balise <link> et la coller dans votre html, entre les balises <head>. Attention, vous devez appeler les polices d’écriture avant le CSS qui les utilise.

À présent, il ne vous reste plus qu’à utiliser ces polices d’écriture dans votre CSS comme indiqué sur le site de google fonts.

<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
body {
	font-family: 'Roboto', sans-serif;
}
h2 {
	font-family: 'Oswald', sans-serif;
}

Deuxième méthode : Ajout manuel en CSS

Pour importer une police de caractères externe dans votre feuille de style CSS, vous pouvez utiliser la règle @font-face. Voici un exemple de comment vous pourriez le faire :

  1. Tout d’abord, téléchargez la police de caractères que vous souhaitez utiliser et placez les fichiers de police dans votre projet.
  2. Ajoutez le bloc @font-face à votre fichier CSS pour importer la police. Assurez-vous de spécifier le chemin correct vers les fichiers de police :
@font-face {
    font-family: 'NomDeVotrePolice'; /* Choisissez un nom pour votre police */
    src: url('chemin/vers/le/fichier-de-police.woff2') format('woff2'),
         url('chemin/vers/le/fichier-de-police.woff') format('woff');
    /* Ajoutez des formats supplémentaires si nécessaire (comme ttf, eot) */
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'NomDeVotrePolice', sans-serif; /* Utilisez le nom spécifié dans @font-face */
}

Assurez-vous de remplacer 'NomDeVotrePolice', 'chemin/vers/le/fichier-de-police.woff2', et 'chemin/vers/le/fichier-de-police.woff' par les valeurs appropriées pour votre police de caractères.

N’oubliez pas que le téléchargement et l’utilisation de polices peuvent être soumis à des droits d’auteur, veillez donc à respecter les licences de la police que vous utilisez.

Taille du texte : font-size

Avec la propriété CSS font-size vous allez pouvoir influencer la taille de vos textes. Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs personnalisées dans différentes unités.

vous pouvez définir une taille par une valeur numérique personnalisée et une unité choisie. Il existe de multiples unités pour définir une taille de texte, en voici quelques-unes :

Unités de Mesure :

Pixels (px) : Une unité de mesure fixe. Un pixel équivaut à un point sur l’écran, mais la taille réelle d’un pixel peut varier en fonction de la résolution de l’écran.

<body>
   <b>Avec la propriété CSS font-size vous allez pouvoir influencer la taille de vos textes. </b>
   <p>Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs personnalisées dans différentes unités</p>
   </body>
body {
    font-size: 16px; /* Taille du texte de base en pixels */
}
p{
    font-size: 18px;
}

Points (pt) : Une unité de mesure utilisée principalement pour les imprimeurs. Un point est équivalent à 1/72 pouce.

body {
    font-size: 16px; /* Taille du texte en pixels */
}
p{
    font-size: 18pt; /* Taille du texte de base en points */
}

Pourcentage (%) : La taille du texte est définie en pourcentage de la taille du texte de base de l’élément parent. Par exemple, si la taille de police de base du parent est de 16px, font-size: 150%; signifiera une taille de 24px.

body {
    font-size: 100%; /* Taille du texte de base à 100% */
}

p {
    font-size: 80%; /* Taille du texte réduite pour les éléments 'small' */
}

Ems (em) : La taille du texte est définie en multiples de la taille du texte de base de l’élément parent. Un em est égal à la taille de la police de l’élément.

body {
    font-size: 1em; /* Taille du texte de base à 1em */
}

p{
    font-size: 1.5em; /* Taille du texte pour les titres p à 1.5em */
}

L’unité « rem » est quant à elle relative à la taille de la racine HTML, l’élément « <html> ». Ainsi, si la taille définie pour l’élément <html> a été définie à 16px, un élément du site ayant une taille de « 1rem » aura une taille équivalente à celle de l’élément <html> soit « 16px ». Un élément qui aura une taille de « 0.75rem » aura au final une taille de « 12px » avec la taille définie précédemment pour l’élément <html>.

Les mots-clés définis se décomposent en 2 familles : les tailles absolues et les tailles relatives.

Une taille absolue

Une taille absolue est un mot-clé désignant une valeur absolue basée sur la taille par défaut de l’utilisateur (à savoir medium). Il existe au total 7 mots-clés pour les tailles absolues qui sont :

  • xx-small;
  • x-small;
  • small;
  • medium;
  • large;
  • x-large;
  • xx-large;
<body>
   <b>Avec la propriété CSS font-size vous allez pouvoir influencer la taille de vos textes. </b>
   <p>Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs personnalisées dans différentes unités</p>   
</body>
body {
    font-size: medium; /* Taille du texte de base à la valeur 'medium' */
}

p {
    font-size: x-large; /* Taille du texte pour les titres p à 'x-large' */
}
body {
    font-size: x-large; /* Taille du texte de base à la valeur 'large' */
}
p {
    font-size: xx-large; /* Taille du texte pour les titres p à 'xx-large' */
}

Une taille relative se définie par rapport à la taille de son élément parent. Ainsi avec le mot-clé « larger » le texte aura une taille agrandie par rapport à celle de son parent et à l’inverse avec le mot-clé « smaller » la taille sera réduite.

Mettre du texte en italique : font-style

La propriété CSS font-style permet de donner à un texte la forme « italique » ou « oblique ».
Elle ne fonctionne qu’avec des mots-clés prédéfinis qui sont :

  • « normal » pour une forme normale
  • « italic » pour une forme italique
  • « oblique » pour une forme oblique

Voici comment utiliser la propriété avec chaque valeur :

   <p id="normal">font-style: normal</p>
   <p id="italic">font-style: italic</p>
   <p id="oblique">font-style: oblique</p>
#normal{
    font-style: normal;
}
#italic{
    font-style: italic;
}
#oblique{
    font-style: oblique;
}

La valeur « oblique » peut prendre un second paramètre qui est l’inclinaison du texte. Ainsi si vous souhaitez écrire un texte en oblique avec une inclinaison de 30 degrés, vous définirez sa propriété « font-style » de cette manière :

font-style: oblique 30deg;

Mettre du texte en gras


Pour mettre du texte en gras en CSS, vous utilisez la propriété font-weight. Vous pouvez définir la valeur de font-weight sur bold, ou utiliser des valeurs numériques telles que 700. Voici comment le faire :

<body>
   <h1>Mettre du texte en gras </h1>
   <p>Pour mettre du texte en gras en CSS, vous utilisez la propriété font-weight. Vous pouvez définir la valeur de font-weight sur bold, ou utiliser des valeurs numériques telles que 700. Voici comment le faire </p> 
</body>
p {
    font-weight: bold; /* Utilisation de la valeur "bold"  */
}
h1 {
    font-weight: 700; /* Utilisation de la valeur numérique "700"  */
}

Astuce pour les valeurs numériques :

Les valeurs numériques pour font-weight vont généralement de 100 à 900 par incréments de 100, où 400 est considéré comme normal et 700 est généralement utilisé pour le gras. Vous pouvez expérimenter avec ces valeurs pour ajuster la gravité du gras.

Voici un exemple avec différentes valeurs numériques :

p.normal {
    font-weight: normal; /* Équivalent à 400 */
}
p.semi-bold {
    font-weight: 600;
}
p.bold {
    font-weight: bold; /* Équivalent à 700 */
}
p.extra-bold {
    font-weight: 800;
}

Utilisez ces règles CSS dans votre feuille de style pour appliquer le style gras aux éléments souhaités. N’oubliez pas que tous les éléments HTML ne peuvent pas être mis en gras (par exemple, les éléments de formulaire ne supportent pas forcément cette propriété).

Convertir les lettres minuscules en « petites » majuscules

La propriété CSS font-variant est utilisée pour contrôler l’affichage des variantes de police. Elle peut être utilisée pour activer ou désactiver la présentation en petites majuscules pour les caractères de texte.

Voici comment utiliser font-variant en CSS :

font-variant: normal;

font-variant: small-caps;

<body>
   <h1>La propriété CSS font-variant</h1>
   <p >La propriété CSS font-variant est utilisée pour contrôler l'affichage des variantes de police.</p>
</body>
h1 {
    font-variant: small-caps;
}
p {
    font-variant: normal;
}

Cela désactive toutes les variantes de police.

  • La propriété font-variant peut être utile pour donner un aspect esthétique particulier au texte.
  • Toutes les polices prennent en charge font-variant: small-caps, mais il est possible que certaines polices ne fournissent pas de variantes visuellement distinctes.
  • L’utilisation de font-variant dépend également de la prise en charge par les navigateurs, donc il est toujours bon de vérifier la compatibilité avec les navigateurs cibles.

Combiner toutes les propriétés

La propriété CSS font est une propriété raccourcie qui permet de définir plusieurs propriétés de police en une seule déclaration. Elle peut inclure plusieurs valeurs telles que la taille de la police, le style de la police, le poids de la police, la famille de polices, etc.

Voici la syntaxe générale de la propriété font :

sélecteur {
    font: style de police taille/police famille;
}
  • Style de police (obligatoire) : Peut être normal, italic, ou oblique.
  • Taille de police (obligatoire) : Peut être définie en pixels (px), points (pt), ems (em), pourcentage (%), ou mots-clés (small, medium, large, etc.).
  • Poids de police (optionnel) : Peut être un nombre, ou les mots-clés normal ou bold.
  • Famille de polices (optionnel) : Peut être une liste de noms de polices, séparés par des virgules, ou le mot-clé serif, sans-serif, monospace, etc.

Exemples d’utilisation de la propriété font :

p {
    font: italic bold 16px/1.5 "Times New Roman", serif;
}

Cela peut simplifier le code CSS en regroupant plusieurs propriétés de police en une seule déclaration, facilitant ainsi la gestion et la lecture du code. La propriété font est souvent utilisée lorsque plusieurs propriétés de police doivent être spécifiées pour un même élément.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *