Typographie et style de police en CSS

Cours 4 : Typographie et style de police en CSS

Dans cette conférence, nous explorerons comment styliser du texte en utilisant CSS. La typographie est un aspect essentiel de la conception Web qui affecte la lisibilité, l'expérience utilisateur et l'esthétique globale. À la fin de cette conférence, vous saurez comment appliquer différents styles de police et contrôler l'apparence du texte sur votre site Web.

Comprendre les polices Web

Les polices Web vous permettent d'utiliser différentes polices de caractères sur votre site Web. Vous pouvez utiliser des polices système préinstallées sur les appareils ou importer des polices personnalisées à l'aide de services tels que Google Fonts.

1. Polices système

Les polices système sont fiables car elles sont préinstallées sur la plupart des appareils, mais elles limitent vos options de conception.

• Exemple :

  body {
    font-family: Arial, sans-serif;
  }

2. Polices Google

Google Fonts propose une large sélection de polices Web que vous pouvez facilement intégrer à votre site Web.

• Exemple :

  1. Tout d'abord, incluez le lien de la police dans votre HTML  :

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

  Copier après la connexion

1. Ensuite, appliquez la police dans votre CSS :
   

    body {
      font-family: 'Roboto', sans-serif;
    }
   

   Copier après la connexion

Propriétés des polices en CSS

CSS offre une variété de propriétés pour styliser vos polices, notamment la taille, l'épaisseur, le style, etc.

1. Taille de la police

Vous pouvez contrôler la taille du texte à l'aide de la propriété font-size.

• Exemple :

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2. Poids de la police

La propriété font-weight vous permet de définir le degré d'audace du texte.

• Exemple :

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

3. Style de police

La propriété font-style vous permet de mettre le texte en italique.

• Exemple :

  em {
    font-style: italic;
  }

4. Variante de police

Utilisez font-variant pour afficher le texte en petites majuscules.

• Exemple :

  p.caps {
    font-variant: small-caps;
  }

5. Hauteur de la ligne

La propriété line-height contrôle l'espace entre les lignes de texte.

• Exemple :

  p {
    line-height: 1.5;
  }

6. Alignement du texte

La propriété text-align contrôle l'alignement horizontal du texte dans un élément.

• Exemple :

  h1 {
    text-align: center;
  }

7. Décoration de texte

La propriété text-decoration vous permet d'ajouter des soulignements, des surlignements ou des barrés au texte.

• Exemple :

  a {
    text-decoration: underline;
  }

8. Ombre de texte

Vous pouvez ajouter un effet d'ombre à votre texte en utilisant la propriété text-shadow.

• Exemple :

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

Exemple pratique :

Combinons ces propriétés pour styliser une page Web en mettant l'accent sur la typographie.

HTML :

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>

CSS :

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

Dans cet exemple :

• La police Google "Open Sans" est utilisée pour tout le texte.
• Les titres (h1, h2) sont stylisés avec des tailles de police, des épaisseurs et des ombres de texte spécifiques.
• Les paragraphes reçoivent une taille de police standard, avec un style spécial appliqué à la classe .intro, notamment l'italique et les petites majuscules.
• Le contenu est centré sur la page avec une largeur maximale et des marges automatiques.

Exercice pratique

1. Créez une page HTML avec différents titres et paragraphes.
2. Appliquez différentes propriétés de police pour styliser votre texte.
3. Utilisez une police Google pour donner à votre page Web un aspect unique.
4. Expérimentez l'alignement du texte, la décoration et les effets d'ombre.

Prochaine étape : Dans la prochaine conférence, nous discuterons des Mise en page CSS : flotteurs, Flexbox et grille, où vous apprendrez à créer des mises en page complexes et réactives pour votre site Web. Restez à l'écoute !

Suivez-moi sur LinkedIn
Ridoy Hasan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!