77 lines
2.7 KiB
Markdown
77 lines
2.7 KiB
Markdown
|
# Utiliser des typographies sur le web
|
||
|
|
|
||
|
|
Lorsque l'on publie du contenu sur le web, nous avons la possibilité de personnaliser les polices de caractères utilisées.
|
||
|
|
|
||
|
|
## Les polices système
|
||
|
|
|
||
|
|
Il existe une famille informelle de polices appellées "polices systèmes". Ce sont les polices qui ont le plus de chance d'être installées sur la quasi-totalité des ordinateurs, quelque soit le système d'exploitation utilisé. On y trouve notamment :
|
||
|
|
|
||
|
|
- Arial
|
||
|
|
- Times New Roman
|
||
|
|
- Trebuchet
|
||
|
|
- Verdana
|
||
|
|
- Georgia
|
||
|
|
- Courier
|
||
|
|
|
||
|
|
## Modifier la police
|
||
|
|
|
||
|
|
En CSS, la propriété permettant de changer la police de caractères est `font-family`
|
||
|
|
|
||
|
|
```css
|
||
|
|
body {
|
||
|
|
font-family: Arial;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Afin de s'assurer un certain contrôle sur la police affichée dans le cas où l'utilisateur n'aurait pas celle que nous voulons utiliser, il convient de lister des polices alternatives. On termine généralement en utilisant un mot-clé générique définissant la famille de police souhaitée.
|
||
|
|
|
||
|
|
```css
|
||
|
|
body {
|
||
|
|
font-family: Helvetica, Arial, sans-serif;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Les polices personnalisées
|
||
|
|
|
||
|
|
L'intérêt des polices web vient surtout de la possibilité d'utiliser sa (ou ses) propre police.
|
||
|
|
|
||
|
|
### Choisir une police
|
||
|
|
|
||
|
|
La première étape est de choisir une police adaptée au projet. Il existe de nombreux sites proposant des polices gratuites à télécharger. Je vous recommande [Font Squirrel](https://www.fontsquirrel.com/) ou [Google fonts](https://fonts.google.com/).
|
||
|
|
|
||
|
|
### Préparer la police
|
||
|
|
|
||
|
|
Un fichier de police sera généralement au format `.otf` ou `.ttf`. Ces formats, bien que compatibles, ne sont pas adaptés pour une utilisation web. Il convient de les convertir au format `.woff2`. Vous pouvez le faire grâce à des outils en ligne tels que [Transfonter.](https://transfonter.org/)
|
||
|
|
|
||
|
|
Il est aussi possible de supprimer les caractères inutilisés dans le fichier de police (comme les alphabets non latin) afin de réduire le poids du fichier.
|
||
|
|
|
||
|
|
### Importer la police
|
||
|
|
|
||
|
|
Avant de pouvoir utiliser notre police personnalisée, nous devons la rendre disponible sur notre site web. Cela se passe dans le fichier CSS, grâce à la déclaration `@font-face`.
|
||
|
|
|
||
|
|
```css
|
||
|
|
@font-face {
|
||
|
|
font-family: "Luciole"; // on définit le nom de la police
|
||
|
|
src: url("../fonts/webfonts/Luciole-Regular.woff2") format("woff2"); // chemin vers le fichier .woff2
|
||
|
|
font-weight: normal; // graisse de la police
|
||
|
|
font-style: normal; // style de la police
|
||
|
|
font-display: swap; // stratégie de chargement de la police
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Utiliser la police
|
||
|
|
|
||
|
|
Il ne reste plus qu'à indiquer aux éléments concernés qu'ils doivent utiliser notre police personnalisée !
|
||
|
|
|
||
|
|
:::warning Attention
|
||
|
|
N'oubliez pas les polices de secours 😉
|
||
|
|
:::
|
||
|
|
|
||
|
|
```css
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3 {
|
||
|
|
font-family: "Luciole", Arial, sans-serif;
|
||
|
|
}
|
||
|
|
```
|