La conception typographique est un élément essentiel d'une conception de site Web réussie. Créer des sites avec du texte facile à lire et qui a fière allure est l'objectif de tout professionnel de la conception Web. Pour ce faire, vous devrez être en mesure de définir les polices spécifiques que vous souhaitez utiliser sur vos pages Web. Pour spécifier la police ou la famille de polices de vos documents Web, vous utiliserez la propriété de style font-family dans votre CSS.
Le style de famille de polices le plus simple que vous puissiez utiliser inclurait une seule famille de polices:
p {
famille de polices: Arial ;
}
Si vous appliquiez ce style à une page, tous les paragraphes seraient affichés dans la famille de polices "Arial". C'est génial et puisque "Arial" est ce qu'on appelle une "police sécurisée pour le Web", ce qui signifie la plupart (sinon toutes) ordinateurs l'auraient installé, vous pouvez être tranquille en sachant que votre page s'affichera dans le Police de caractère.
Que se passe-t-il si la police que vous sélectionnez est introuvable? Par exemple, si vous n'utilisez pas de "police sécurisée pour le Web" sur une page, que fait l'agent utilisateur s'il n'a pas cette police? Ils font un remplacement.
Cela peut donner lieu à des pages amusantes. Une fois, je suis allé sur une page où mon ordinateur l'affichait entièrement dans "Wingdings" (un ensemble d'icônes) parce que mon ordinateur n'avait pas la police que le développeur avait spécifiée, et mon navigateur a fait un choix catastrophique dans la police qu'il utiliserait comme remplacement. La page était totalement illisible pour moi! C'est là qu'une pile de polices entre en jeu.
Séparez plusieurs familles de polices par une virgule dans une pile de polices
Une "pile de polices" est une liste de polices que vous souhaitez que votre page utilise. Vous mettrez vos choix de polices dans l'ordre de vos préférences et sépareriez chacune par une virgule. Si le navigateur n'a pas la première famille de polices sur la liste, il essaiera la deuxième, puis la troisième et ainsi de suite jusqu'à ce qu'il en trouve une sur le système.
famille de polices: Pussycat, algérien, Broadway ;
Dans l'exemple ci-dessus, le navigateur recherchera d'abord la police "Pussycat", puis "Algerian" puis "Broadway" si aucune des autres polices n'a été trouvée. Cela vous donne plus de chances qu'au moins une des polices que vous avez choisies soit utilisée. Ce n'est pas parfait, c'est pourquoi nous en avons encore à ajouter à notre pile de polices (lisez la suite !).
Utiliser les polices génériques en dernier
Ainsi, vous pouvez créer une pile de polices avec une liste de polices et n'en avoir aucune que le navigateur puisse trouver. Vous ne voulez pas que votre page apparaisse illisible si le navigateur fait un mauvais choix de substitution. Heureusement CSS a une solution pour cela aussi, et elle s'appelle polices génériques.
Vous devez toujours terminer votre liste de polices (même s'il s'agit d'une liste d'une seule famille ou uniquement de polices Web sécurisées) par une police générique. Il y en a cinq que vous pouvez utiliser:
- Cursive
- Fantaisie
- Monospace
- sans empattement
- Serif
Les deux exemples ci-dessus peuvent être remplacés par:
famille de polices: Arial, sans empattement ;
ou alors.
famille de polices: Pussycat, Algérien, Broadway, fantasy ;
Certains noms de famille de polices sont composés de deux mots ou plus
Si la famille de polices que vous souhaitez utiliser comporte plusieurs mots, vous devez l'entourer de guillemets doubles. Alors que certains navigateurs peuvent lire les familles de polices sans guillemets, il peut y avoir des problèmes si l'espace est condensé ou ignoré.
famille de polices: "Times New Roman", empattements ;
Dans cet exemple, vous pouvez voir que le nom de police « Times New Roman », qui est composé de plusieurs mots, est placé entre guillemets. Cela indique au navigateur que ces trois mots font partie de ce nom de police, par opposition à trois polices différentes, toutes avec des noms à un mot.