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 93f0f5c25f18dab9d176bd4f6de5d30e :

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

1. Ensuite, appliquez la police dans votre CSS :
   

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

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 :

5d1e94760349a02ec7e3e05385bc999a
  4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a
  c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd
  03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

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!