Polices (fontes) et texte

Nous allons voir dans cette session de formation quelques propriété de font et de texte.

Font et Texte

Nous allons découvrir pratiquement les propiétés suivant :

  • font-family : permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l’élément ciblé.
  • font-size : définit la taille de fonte à utilisée pour le texte.
  • line-height : définit la hauteur de la boîte d’une ligne.
  • letter-spacing : définit l’interlettre utilisée pour les caractères qui composent le texte.
  • text-align : définit l’alignement horizontal d’un élément de bloc ou de la boîte d’une cellule de tableau.
1
2
3
4
5
6
7
8
9

html{ 
    font-family: Calibri, sans-serif;
    font-size: 14px }
h1{
    font-size: 40px; 
    text-align: center; }
p{
    font-size: 20px; line-height: 2;
    letter-spacing: 1px; }

Les polices (fontes) et le texte

Pratique : polices et texte

L’objectifs de ce TP :

  • découvrir de quelques propriétés de font et de texte

Explication pratique élément h1

Code source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html>
<head>
    <style>
        html{
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 14px
        }
        h1{
            font-size: 40px;
            text-align: center;
        }
        p{
            font-size: 20px;
            line-height: 2;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
    <h1>Qu'est-ce que l'ordinateur</h1>

    <p>
    Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">ordinateur</a> est un appareil électronique capable de 
    réaliser rapidement des opérations mathématiques, 
    logiques, des manipulations de chaînes de caractères 
    ou des recherches. Il est composé de deux grandes parties :
    </p>
</body>
</html>

Google font

Google Fonts est une bibliothèque de plus de 1000 familles de polices sous licence gratuites pour une utilisation pratique via CSS.

La règle @import est utilisée afin d’importer des règles à partir d’autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles

1
2
3

<style>
    @import url('https://fonts.googleapis.com/css2?family=...');
</style>

Pratique : google font

L’objectifs de ce TP :

  • découvrir google font

Explication pratique élément h1

Code source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Police et Texte</title>
    <style>
       @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

       html{
            font-family: 'Ubuntu', sans-serif;
       }
       h1{
            font-size: 40px;
            text-align: center;
       }
       p{
            font-size: 20px;
            line-height: 2;
            letter-spacing: 1px;
       }
    </style>
</head>
<body>
    <h1>Qu'est-ce que l'ordinateur</h1>

    <p>
    Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">ordinateur</a> est un appareil électronique capable de 
    réaliser rapidement des opérations mathématiques, 
    logiques, des manipulations de chaînes de caractères 
    ou des recherches. Il est composé de deux grandes parties :
    </p>
</body>
</html>

Références

devenir-developpeur-web