CSS - Polices Web : Guide pour Débutants

Salut à toi, futur designer web ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde des Polices Web CSS. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux te dire que comprendre les polices, c'est comme apprendre une nouvelle langue - cela peut sembler décourageant au début, mais une fois que tu as pris l'habitude, tu seras étonné de voir comment cela transforme tes pages web !

Qu'est-ce que les Polices Web ?

Avant de plonger dans les détails, intéressons-nous aux bases. Les polices web sont des polices personnalisées que tu peux utiliser sur ton site, indépendamment de savoir si elles sont installées sur l'ordinateur d'un utilisateur. C'est comme donner à ton site une voix unique !

Pourquoi les Polices Web sont-elles Importantes ?

Imagine si chaque livre dans le monde utilisait la même police. ennuyeux, non ? Les polices web te permettent d'exprimer la personnalité de ton site et d'améliorer la lisibilité. Elles sont la sauce secrète qui peut faire ressortir ton site du lot !

Polices Web CSS - Formats de Police

Maintenant, parlons des différents types de formats de police. C'est comme choisir entre的不同口味 de crème glacée - chacun a ses propres caractéristiques !

Format	Description	Support des Navigateurs
TTF/OTF	Police TrueType / Police OpenType	Tous les navigateurs modernes
WOFF	Format Open Font Web	Tous les navigateurs modernes
WOFF2	Format Open Font Web 2	La plupart des navigateurs modernes
EOT	OpenType Embarqué	Internet Explorer
SVG	Graphiques Vectoriels Étendables	Anciennes versions iOS

Ne t'inquiète pas si cela semble comme un saladier d'initiales maintenant. Nous allons le décomposer au fur et à mesure !

Polices Web CSS - Points Clés

Avant de nous salir les mains avec du code, couvrons quelques points clés :

1. Les polices web te permettent d'utiliser des polices personnalisées sur ton site.
2. Elles sont chargées depuis un serveur, pas depuis l'ordinateur de l'utilisateur.
3. Tu peux utiliser des services comme Google Fonts ou héberger tes propres polices.
4. Il existe différents formats de police pour la compatibilité des navigateurs.
5. La règle @font-face est utilisée pour définir des polices personnalisées dans le CSS.

Polices Web CSS - @font-face At-Rule

Maintenant, plongeons dans un peu de code ! La règle @font-face est comme présenter une nouvelle police à ta page web. Voici à quoi elle ressemble :

@font-face {
font-family: 'MaSuperPolice';
src: url('chemin/vers/ma-super-police.woff2') format('woff2'),
url('chemin/vers/ma-super-police.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Décomposons cela :

• font-family : C'est le nom que tu donnes à ta police. Tu utiliseras ce nom plus tard pour appliquer la police aux éléments.
• src : Cela spécifie où trouver le fichier de police et dans quel format il se trouve.
• font-weight et font-style : Ceux-ci définissent les caractéristiques de la police.

Après avoir défini ta police, tu peux l'utiliser comme suit :

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

Cela dit au navigateur, "Eh, utilise MaSuperPolice, mais si tu ne peux pas la trouver, utilise n'importe quelle police sans serif."

Polices Web CSS - @font-face / font-stretch

La propriété font-stretch est comme une classe de yoga pour tes polices. Elle te permet de les étirer ou de les compresser. Voici comment tu peux l'utiliser :

@font-face {
font-family: 'PoliceEtirable';
src: url('chemin/vers/police-etirable.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.texte-etire {
font-family: 'PoliceEtirable';
font-stretch: 150%;
}

Cela rendra ton texte comme s'il était allé à la salle de sport et avait pris un peu de muscle !

Polices Web CSS - Service de Police en Ligne

Utiliser un service de police en ligne, c'est comme commander à emporter au lieu de cuisiner - c'est pratique et il y a une large sélection à choisir. Google Fonts est un choix populaire. Voici comment tu peux l'utiliser :

1. Va sur Google Fonts et sélectionne une police que tu aimes.
2. Copie l'étiquette de lien fournie et colle-la dans ton <head> HTML :

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

3. Utilise la police dans ton CSS :

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

Et voilà ! Tu utilises maintenant une police personnalisée de Google Fonts.

Polices Web CSS - Importer une Police

Une autre façon d'inclure des polices web est d'utiliser la règle @import. C'est comme inviter une police à ta fête CSS. Voici comment cela fonctionne :

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

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

Cette méthode te permet de garder toutes tes déclarations de police dans ton fichier CSS, ce que certains développeurs préfèrent pour l'organisation.

Conclusion

Félicitations ! Tu viens de faire tes premiers pas dans le merveilleux monde des Polices Web CSS. Souviens-toi, comme pour toute nouvelle compétence, la pratique rend parfait. N'aie pas peur d'expérimenter avec différentes polices et de voir comment elles changent l'apparence et le ressenti de tes pages web.

Pour conclure, voici une petite histoire de mon expérience d'enseignement : J'avais une élève qui avait du mal avec le design web. Elle ne comprenait pas pourquoi ses sites avaient l'air si... ternes. Puis nous avons couvert les polices web, et c'était comme si une ampoule s'allumait. Soudain, ses sites sont passés de fades à magnifiques. C'est le pouvoir des polices web !

Alors, va-y, joue avec les polices, et regarde tes pages web prendre vie. Bon codage, et souviens-toi - dans le monde du design web, la seule limite est ton imagination !

Credits: Image by storyset