Vous avez une certaine confusion en ce qui concerne la synthaxe de la fonction Font-Family en CSS ? Voici ce que vous devez savoir
La conception typographique est un élément extrêmement important d'une conception de site Web réussie. Créer des sites avec du texte facile à lire et qui a fière allure est le but 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 dans vos documents Web, vous utiliserez la propriété de style de famille de polices dans votre CSS .
Le style de famille de polices le plus simple que vous pourriez utiliser comprendrait une seule famille de polices:
p{font-family: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 Web sécurisée", ce qui signifie que la plupart des ordinateurs (sinon tous) l'auraient installé, vous pouvez vous reposer assez facilement en sachant que votre page s'affichera dans la police souhaitée. .
Que se passe-t-il donc si la police que vous sélectionnez est introuvable? Par exemple, si vous n'utilisez pas de «police Web sécurisée» sur une page, que fait l'agent utilisateur s'il n'a pas cette police? Ils font une substitution.
Cela peut entraîner des pages amusantes. Une fois, je suis allé sur une page où mon ordinateur l'affichait entièrement dans "Wingdings" (un jeu 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 épouvantable dans la police qu'il utiliserait en remplacement. La page était entièrement 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 devez placer vos choix de polices dans votre préférence et les séparer chacun 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.
font-family:Pussycat,Algérien,Broadway;
Dans l'exemple ci-dessus, le navigateur recherchera d'abord la police "Pussycat", puis "Algérien" puis "Broadway" si aucune des autres polices n'a été trouvée. Cela vous donne plus de chances qu'au moins une des polices choisies soit utilisée. Ce n'est pas parfait, c'est pourquoi nous avons encore plus à ajouter à notre pile de polices (lisez la suite!).
Utiliser les polices génériques en dernier
Vous pouvez donc 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 cela s'appelle des 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) avec une police générique. Vous pouvez en utiliser cinq:
- Cursive
- Fantaisie
- Monospace
- Sans empattement
- Serif
Les deux exemples ci-dessus peuvent être remplacés par:
font-family:Arial, sans-serif; ou font-family: Pussycat, Algérien, Broadway, fantasy;
Certains noms de famille de polices sont constitués de deux mots ou plus
Si la famille de polices que vous souhaitez utiliser est composée de plusieurs mots, vous devez l'entourer de guillemets doubles. Bien que certains navigateurs puissent lire les familles de polices sans guillemets, il peut y avoir des problèmes si l'espace blanc est condensé ou ignoré.
font-family:"Times New Roman", serif;
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 d'un mot.
