Polices de navigateur standard. Polices sécurisées
Si vous débutez dans la conception Web, vous vous demandez peut-être quelque chose comme : « Pourquoi devrais-je me limiter à un si petit ensemble de polices ? J'ai une énorme collection de belles polices ! » Le fait est que le navigateur du visiteur ne peut afficher que les polices installées dans son système opérateur ( env. traducteur: Actuellement, il est déjà possible d'utiliser pratiquement toutes les polices lors de la conception de pages à l'aide de CSS 3 et de sa nouvelle propriété @font-face; cependant, tous les navigateurs ne prennent pas encore en charge cette fonction), ce qui signifie que chaque le visiteur de votre page doit être le propriétaire des polices que vous avez choisies. Par conséquent, vous ne devez utiliser que les polices disponibles sur chaque système d'exploitation. Heureusement, CSS a une propriété @font-famille, ce qui facilite cette tâche.
Liste
| @font-family signifiant | Fenêtres | Mac | Famille |
|---|---|---|---|
| Arial, Helvetica, sans empattement | Arial | Arial, Helvética | sans empattement |
| "Arial Black", Gadget, sans empattement | Arial Noir | Arial Noir, Gadget | sans empattement |
| "Comic Sans MS", cursive | Comic Sans MS | Bande dessinée Sans MS 5 | cursive |
| "Courier New", Courrier, monospace | Courrier Nouveau | Courrier Nouveau, Courrier 6 | monospace |
| Géorgie, Serif | Géorgie 1 | Géorgie | empattement |
| Impact, charbon, sans empattements | Impact | Impact 5, Charbon 6 | sans empattement |
| "Console Lucida", Monaco, monospace | Console Lucide | Monaco 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans empattement | Lucida Sans Unicode | Lucida Grande | sans empattement |
| "Palatino Linotype", "Book Antiqua", Palatino, empattement | Palatino Linotype, Livre Antiqua 3 | Palatin 6 | empattement |
| Tahoma, Genève, sans empattements | Tahoma | Genève | sans empattement |
| "Times New Roman", Times, empattements | Times New Roman | Fois | empattement |
| "Trebuchet MS", Helvetica, sans empattement | Trébuchet MS 1 | Helvétique | sans empattement |
| Verdana, Genève, sans empattements | Verdane | Verdana, Genève | sans empattement |
| Symbole | Symbole 2 | Symbole 2 | - |
| Sangles | Sangles 2 | Sangles 2 | - |
| Wingdings, "Zapf Dingbats" | Ailes 2 | Zapf Symboles 2 | - |
| "MS Sans Serif", Genève, sans-serif | MS Sans Serif 4 | Genève | sans empattement |
| "MS Serif", "New York", empattement | MS Serif 4 | New York 6 | empattement |
1 Les polices Georgia et Trebuchet MS sont livrées avec Windows 2000/XP et sont incluses dans le package de polices IE (et sont en effet fournies avec de nombreuses applications Microsoft), elles sont donc installées sur de nombreux ordinateurs Windows 98.
2 Les polices Symbol sont affichées uniquement dans Internet Explorer ; dans d'autres navigateurs, elles sont généralement remplacées par une police standard (bien que, par exemple, la police Symbol soit affichée dans Opera et Webdings dans Safari).
3 La police Book Antiqua est presque identique à Palatino Linotype ; Palatino Linotype est livré avec Windows 2000/XP et Book Antiqua est livré avec Windows 98.
4 Veuillez noter que ces polices ne sont pas TrueType, mais bitmap, elles peuvent donc avoir un mauvais rendu dans certaines tailles (elles sont conçues pour s'afficher à 8, 10, 12, 14, 18 et 24 pts à 96 DPI).
5 Ces polices fonctionnent uniquement dans Safari en style standard, mais ne fonctionnent pas en gras ou en italique. Comic Sans MS fonctionne également en gras, mais pas en italique. D'autres navigateurs Mac semblent bien émuler les propriétés de police manquantes (merci à Christian Fecteau pour le conseil).
6 Ces polices sont installées sur Mac uniquement avec l'installation classique
Captures d'écran
- Mac OS X 10.4.8, Firefox 2.0, ClearType activé (merci à Juris Vecvanags pour la capture d'écran)
- Mac OS X 10.4.4, Firefox 1.5, ClearType activé
- Mac OS X 10.4.11, Safari 3.0.4, ClearType activé (merci à Nolan Gladius pour la capture d'écran)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType activé (merci à Eric Zavesky pour la capture d'écran)
- Windows Vista, Internet Explorer 7, ClearType activé
- Windows Vista, Firefox 2.0, ClearType activé (merci à Michiel Bijl pour la capture d'écran)
Lorsque vous commencez à créer une mise en page, vous devez spécifier spécifiquement dans le CSS les polices utilisées sur la page. Souvent, dans différentes polices, le concepteur tape non seulement le texte principal de la page, mais également divers titres, logos et monogrammes.
Un bon concepteur, comme un bon maquettiste, sait que le navigateur ne peut utiliser que les polices installées sur l’ordinateur de l’utilisateur pour afficher une page. Autrement dit, les polices peuvent être divisées en deux catégories :
- Des polices qui seront affichées sans problème par la grande majorité des utilisateurs.
- Des polices qu'un groupe assez important d'utilisateurs ne possède pas.
Si le designer a utilisé des polices de deuxième catégorie pour créer, par exemple, un logo ou de gros titres statiques, on ne peut pas hésiter à utiliser la technique du remplacement du texte par une image. L’inconvénient de l’utilisation de cette technique est le manque de flexibilité. S'il y a des changements dans le texte, vous devrez refaire l'image et changer le CSS (par exemple, si les dimensions de la nouvelle image ne correspondent pas à l'ancienne).
On peut dire que le danger d'utiliser une technique dépend directement de la probabilité de modifier le texte. Ainsi, par exemple, le texte général d’une page ne peut pas être écrit dans des polices non standard ! Un designer compétent ne ferait jamais cela. Et si le concepteur tombe sur une police verte, un bon maquettiste est simplement obligé de corriger son erreur - dans la mise en page, remplacez cette police par la police standard la plus similaire.
Mais comment distinguer les polices du premier groupe de celles du second ? Il est clair que vous ne pouvez pas vous fier à un ensemble de polices installées directement sur votre ordinateur ! Voyons cela.
Polices standards
Les polices standard sont un ensemble de polices installées avec le système d'exploitation. Étant donné que les systèmes d'exploitation sont différents, leur ensemble de polices est différent. Une liste des polices standards pour différentes versions de Windows peut être trouvée, par exemple, dans l'article Polices Windows standard, et une liste des polices standard Mac OS sur la page Polices incluses avec Mac OS. Quant aux systèmes d'exploitation Unix/Linux, ils ne disposent pas d'un seul jeu de polices. De nombreux utilisateurs Linux utilisent le jeu de polices DejaVu, notamment sur Ubuntu, ils sont installés par défaut. Selon les statistiques de http://www.codestyle.org, de nombreux utilisateurs d'Unix/Linux ont également installé des jeux de polices URW, Free et autres. Selon les mêmes statistiques, plus de 60 % des utilisateurs d'Unix/Linux possèdent sur leur ordinateur des polices de la gamme Core Fonts for the Web, qui jusqu'en 2002 était officiellement disponible en téléchargement gratuit sur le site Web de Microsoft.
Pour que la page soit affichée comme le concepteur l'a prévu sur n'importe quel système d'exploitation, il est possible de spécifier plusieurs polices dans la propriété CSS font-family, répertoriées séparées par des virgules.
Cette propriété spécifie une liste prioritaire de noms de familles de polices et/ou de noms de familles génériques. Selon la spécification CSS2, il existe deux types de noms de famille de polices :
- Le nom de la famille de polices de votre choix. Par exemple, « Times new Roman », « Arial » et autres. Les noms de famille de polices contenant des espaces doivent être placés entre guillemets. Si des guillemets sont manquants, tous les caractères d'espace avant et après le nom de la police sont ignorés et toute séquence d'espaces dans le nom de la police est convertie en un seul espace.
- Famille générique (commune). La spécification définit les familles génériques suivantes :
- serif - polices avec des empattements aux extrémités ;
- sans-serif - polices sans-serif ;
- cursive - polices italiques ;
- fantaisie - polices décoratives;
- monospace - police monospace (avec des lettres de même largeur).
Les noms de famille de clan sont des mots-clés et n’ont pas besoin d’être mis entre guillemets.
Ainsi, pour la conception, une police standard du système d'exploitation Windows est prise, une police similaire pour Mac OS et Unix/Linux est sélectionnée, une famille de polices commune est spécifiée et le tour est joué.
Mais ce n'est pas si simple. Creusons plus en détail.
Recherche de polices Web sécurisées
Sur Internet, le concept de polices Web « sûres » s’est historiquement développé. Une police sécurisée est une police standard pour tous les systèmes d’exploitation. Puisque cet état de choses ne peut qu’être rêvé, il n’existe pas de polices absolument sûres !
Certaines polices peuvent être qualifiées de sûres avec quelques réserves.
La définition des polices « sûres » s'appuie sur les polices du système d'exploitation Windows le plus courant, qui sont également utilisées dans d'autres systèmes d'exploitation. Un exemple d'une telle utilisation est celui des polices Core déjà mentionnées pour le package de polices Web, qui, selon les statistiques, a été téléchargé par de nombreux utilisateurs Unix/Linux.
Ce package comprend les polices suivantes : Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Tous prennent en charge l'alphabet cyrillique, ce qui est important pour Runet.
L'ensemble de polices fourni en standard avec Mac OS X (ce système d'exploitation est le plus largement utilisé parmi les utilisateurs de Mac OS) comprend toutes les polices de l'ensemble de polices Core pour le Web.
Ainsi, sur la base des polices Windows utilisées dans d'autres systèmes d'exploitation, la liste suivante de polices Web dites « sûres » a été constituée :
- Arial
- Arial Noir
- Comic Sans MS
- Courrier Nouveau
- Géorgie
- Impact
- Times New Roman
- Trébuchet MS
- Verdane
La police Webdings contient des icônes et ne peut pas être utilisée pour le contenu. Andale Mono n'est pas largement utilisé car il n'est pas bien adapté à la lecture d'écran quotidienne et tous les utilisateurs de Windows ne l'ont pas.
Tous les utilisateurs de Windows, Mac OS X et la grande majorité des utilisateurs d'Unix/Linux (c'est-à-dire ceux qui ont installé les polices Core pour le package Web) disposent de toutes ces polices.
Mais qu'en est-il du reste ? Après tout, vous voulez que le plan du concepteur soit vu par le plus grand nombre d’utilisateurs possible !
Polices prenant en charge le cyrillique
Une caractéristique spécifique de RuNet est le problème des encodages de pages et de la prise en charge du cyrillique dans les polices. Pour éviter les problèmes avec divers encodages de caractères, des gens intelligents ont imaginé Unicode, qui vous permet de combiner des caractères de plusieurs langues dans une seule police. Ainsi, pour les pages en russe, vous devez utiliser uniquement des polices Unicode prenant en charge le cyrillique.
Vous trouverez ci-dessous un tableau des correspondances de polices.
| Fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Arial Noir | Helvetica C.Y. | Nimbus Sans M | Sans empattement |
| Arial | Helvetica C.Y. | Nimbus Sans M | Sans empattement |
| Comic Sans MS | Monaco CY | * (voir ci-dessous) | cursive |
| Courrier Nouveau | * (voir ci-dessous) | Nimbus Mono L | Monospace |
| Géorgie | * (voir ci-dessous) | Siècle Cahier L | Serif |
| Impact | Charbon de bois C.Y. | * (voir ci-dessous) | Sans empattement |
| Times New Roman | Times C.Y. | Nimbus Romain No9 L | Serif |
| Trébuchet MS | Helvetica C.Y. | * (voir ci-dessous) | Sans empattement |
| Verdane | Genève C.Y. | DéjàVu Sans | Sans empattement |
* dans la colonne en face de la police signifie que le système d'exploitation ne dispose pas d'équivalents cyrilliques natifs de la police Windows. Mais en même temps, il existe une forte probabilité que cette police elle-même soit installée directement dans le système d'exploitation.
Par exemple, si le texte principal de la mise en page est Arial, on retrouve cette police dans le tableau et on écrit la ligne correspondante en CSS :
corps (famille de polices : Arial, "Helvetica CY", "Nimbus Sans L", sans-serif ; )
corps ( famille de polices : Arial, "Helvetica CY", "Nimbus Sans L", sans - serif ; |
Cette entrée signifie que si l'utilisateur possède la police Arial (et que tous les utilisateurs Windows et tous les utilisateurs Mac OS X l'ont), alors la page sera affichée dans cette police. Si l'utilisateur ne dispose pas de cette police, la page d'un utilisateur russophone de Mac OS 9 sera affichée avec précision dans la police système standard Helvetica CY, et pour un utilisateur Unix/Linux, elle sera affichée dans la police Nimbus Sans L. , qui est installé sur 90 % des utilisateurs Unix/Linux. Si l'utilisateur Unix/Linux fait partie des 10 % qui ne possèdent pas cette police, alors la page sera affichée dans la police serif définie par défaut pour l'affichage des pages Web.
En plus du fait que le tableau prend en compte les polices Unix/Linux, il y a aussi une étrange icône CY après l'habituelle Helvetica. Voyons ce que c'est !
Avant la sortie de Mac OS X, cette ligne avait la signification suivante : pour les utilisateurs Windows, on affiche la page en Arial, pour les utilisateurs Mac OS 9, dans la police standard Helvetica, et pour le reste, on voit la page dans le système police sans empattement, configurée par défaut dans le navigateur. Mais encore une fois, une nuance importante ! La police Helvetica standard de Mac OS 9 n'a pas de cyrillique ! Pour la page en langue russe, cela signifiait ce qui suit : pour les utilisateurs de Windows, nous affichons la page Arial, pour les utilisateurs de Mac OS 9 - dans la police Helvetica standard, qui affiche des informations illisibles, et le reste voit la page avec le système sans empattement. police configurée par défaut dans le navigateur.
Pour afficher correctement cet ensemble pour les utilisateurs de Mac OS 9, au lieu de Helvetica non cyrillique, il est logique de spécifier la même police standard Mac OS 9 Helvetica CY, contenant du cyrillique.
La lecture des règles a changé depuis la sortie de Mac OS X. Il existe désormais une police standard commune spécifiée pour Windows/Mac OS X. Et si nous voulons que les utilisateurs de Mac OS 9 puissent voir l'intention du concepteur, nous devons inclure une police contenant du cyrillique dans la ligne de police.
Ainsi, même s’il n’existe pas de polices sécurisées, il existe des familles de polices sécurisées. On les appelle aussi piles CSS de polices. En plus des polices standard Windows/Mac OS X, ces lignes peuvent également inclure des polices équivalentes de l'ensemble standard de Mac OS 9 (qui ne contient pas de polices « sûres » par défaut) et des polices Unix/Linux courantes.
Tout concepteur de mise en page rencontre tôt ou tard un moment où un concepteur utilise une police dans une mise en page qui n'est pas incluse dans la liste des polices « sûres » ; Mais ce n’est pas encore une raison pour tirer la sonnette d’alarme ! Par exemple, les concepteurs utilisent très souvent la police Tahoma sur les mises en page, qui ne figure pas dans cette liste. Une ligne de polices correctement construite ouvre la possibilité d'utiliser non seulement Tahoma, mais également d'autres polices. Un nombre croissant de concepteurs profitent de cette opportunité, et un maquettiste compétent devrait le savoir.
Vous trouverez ci-dessous un tableau supplémentaire de polices qui ne sont pas incluses dans la liste des polices « sûres », mais qui peuvent être utilisées dans les mises en page.
| Fenêtres | MacOS | famille ancestrale |
|---|---|---|
| Console Lucide | Monaco | Monospace |
| Lucida Sans Unicode | Lucida Grande | Sans empattement |
| Tahoma | Genève C.Y. | Sans empattement |
Et s'il n'y avait pas d'alphabet cyrillique ?
Pour les textes en langue anglaise, les tableaux ci-dessus ont une apparence légèrement différente.
| Fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Arial Noir | Gadget | Nimbus Sans M | Sans empattement |
| Arial | Helvétique | Nimbus Sans M | Sans empattement |
| Comic Sans MS | Monaco | TSCu_Comique | cursive |
| Courrier Nouveau | Courrier | Nimbus Mono L | Monospace |
| Géorgie | * (voir ci-dessous) | Siècle Cahier L | Serif |
| Impact | Charbon de bois | Rekha | Sans empattement |
| Times New Roman | Fois | Nimbus Romain No9 L | Serif |
| Trébuchet MS | Helvétique | Garuda | Sans empattement |
| Verdane | Genève | DéjàVu Sans | Sans empattement |
Pour les polices Arial, Courier New et Times New Roman, lors de la création de règles, il est préférable de spécifier d'abord la police Unix/Linux, puis la police Mac OS. Cela est dû à une certaine maladresse du jeu de polices de base de Linux X11.
Les polices qui ne sont pas incluses dans la liste « sûre », mais qui peuvent être utilisées dans les mises en page, sont mieux définies par les piles de polices CSS basées sur ce tableau.
| Fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Console Lucide | Monaco | - | Monospace |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans empattement |
| Linotype palatin | Palatin | Garuda** | Sans empattement |
| Tahoma | Genève | Kalimati | Sans empattement |
Un tiret dans la colonne Unix/Linux indique que les utilisateurs de ces systèmes d'exploitation verront très probablement la police par défaut sur la page.
** Dans cette ligne, il est logique de placer la police Garuda avant Palatino (voir explication ci-dessus).
Conclusions :
- Il n’existe pas de polices absolument sûres. Les polices suivantes peuvent être considérées comme sûres sous certaines conditions :
- Arial
- Arial Noir
- Comic Sans MS
- Courrier Nouveau
- Géorgie
- Impact
- Times New Roman
- Trébuchet MS
- Verdane
- Des piles CSS sécurisées prenant en compte la prise en charge du cyrillique dans les polices peuvent être trouvées dans l'article.
- Si la prise en charge de l'alphabet cyrillique n'est pas importante sur la page, nous utilisons les piles CSS de l'article.
Si vous débutez dans la conception Web, vous vous demandez peut-être quelque chose comme : « Pourquoi devrais-je me limiter à un si petit ensemble de polices ? J'ai une énorme collection de belles polices ! » Le fait est que le navigateur du visiteur ne peut afficher que les polices installées dans son système opérateur ( env. traducteur: Actuellement, il est déjà possible d'utiliser pratiquement toutes les polices lors de la conception des pages et de leurs nouvelles propriétés. @font-face; cependant, tous les navigateurs ne prennent pas encore en charge cette fonction), ce qui signifie que chaque le visiteur de votre page doit être le propriétaire des polices que vous avez choisies. Par conséquent, vous ne devez utiliser que les polices disponibles sur chaque système d'exploitation. Heureusement, CSS a une propriété @font-famille, ce qui facilite cette tâche.
Liste
| @font-family signifiant | Fenêtres | Mac | Famille |
|---|---|---|---|
| Arial, Helvetica, sans empattement | Arial | Arial, Helvética | sans empattement |
| "Arial Black", Gadget, sans empattement | Arial Noir | Arial Noir, Gadget | sans empattement |
| "Comic Sans MS", cursive | Comic Sans MS | Bande dessinée Sans MS 5 | cursive |
| "Courier New", Courrier, monospace | Courrier Nouveau | Courrier Nouveau, Courrier 6 | monospace |
| Géorgie, Serif | Géorgie 1 | Géorgie | empattement |
| Impact, charbon, sans empattements | Impact | Impact 5, Charbon 6 | sans empattement |
| "Console Lucida", Monaco, monospace | Console Lucide | Monaco 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans empattement | Lucida Sans Unicode | Lucida Grande | sans empattement |
| "Palatino Linotype", "Book Antiqua", Palatino, empattement | Palatino Linotype, Livre Antiqua 3 | Palatin 6 | empattement |
| Tahoma, Genève, sans empattements | Tahoma | Genève | sans empattement |
| "Times New Roman", Times, empattements | Times New Roman | Fois | empattement |
| "Trebuchet MS", Helvetica, sans empattement | Trébuchet MS 1 | Helvétique | sans empattement |
| Verdana, Genève, sans empattements | Verdane | Verdana, Genève | sans empattement |
| Symbole | Symbole 2 | Symbole 2 | - |
| Sangles | Sangles 2 | Sangles 2 | - |
| Wingdings, "Zapf Dingbats" | Ailes 2 | Zapf Symboles 2 | - |
| "MS Sans Serif", Genève, sans-serif | MS Sans Serif 4 | Genève | sans empattement |
| "MS Serif", "New York", empattement | MS Serif 4 | New York 6 | empattement |
1 Les polices Georgia et Trebuchet MS sont livrées avec Windows 2000/XP et sont incluses dans le package de polices IE (et sont en effet fournies avec de nombreuses applications Microsoft), elles sont donc installées sur de nombreux ordinateurs Windows 98.
2 Les polices Symbol sont affichées uniquement dans Internet Explorer ; dans d'autres navigateurs, elles sont généralement remplacées par une police standard (bien que, par exemple, la police Symbol soit affichée dans Opera et Webdings dans Safari).
3 La police Book Antiqua est presque identique à Palatino Linotype ; Palatino Linotype est livré avec Windows 2000/XP et Book Antiqua est livré avec Windows 98.
4 Veuillez noter que ces polices ne sont pas TrueType, mais bitmap, elles peuvent donc avoir un mauvais rendu dans certaines tailles (elles sont conçues pour s'afficher à 8, 10, 12, 14, 18 et 24 pts à 96 DPI).
5 Ces polices fonctionnent uniquement dans Safari en style standard, mais ne fonctionnent pas en gras ou en italique. Comic Sans MS fonctionne également en gras, mais pas en italique. D'autres navigateurs Mac semblent bien émuler les propriétés de police manquantes (merci à Christian Fecteau pour le conseil).
6 Ces polices sont installées sur Mac uniquement avec l'installation classique
Captures d'écran
- Mac OS X 10.4.8, Firefox 2.0, ClearType activé (merci à Juris Vecvanags pour la capture d'écran)
- Mac OS X 10.4.4, Firefox 1.5, ClearType activé
- Mac OS X 10.4.11, Safari 3.0.4, ClearType activé (merci à Nolan Gladius pour la capture d'écran)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType activé (merci à Eric Zavesky pour la capture d'écran)
- Windows Vista, Internet Explorer 7, ClearType activé
- Windows Vista, Firefox 2.0, ClearType activé (merci à Michiel Bijl pour la capture d'écran)
Les polices font partie intégrante et très importante de la conception d’un site Web, soulignant son individualité. L'article parlera de la connexion des polices standard à une page Web, elles sont également appelées polices système, et dans le prochain article, nous examinerons en détail le choix et la connexion des polices de Google Fonts à un site WordPress.
Polices système, standard et sécurisées
Tout navigateur affiche uniquement les polices présentes dans le système d'exploitation de l'ordinateur. C'est pourquoi ils sont appelés systèmes et sont installés par défaut avec le système d'exploitation.
Et elles sont appelées polices sûres car elles sont susceptibles d'être affichées dans le navigateur de la majorité des visiteurs du site.
Mais le problème est que différents systèmes d’exploitation ont différents ensembles de polices installés. Vous pouvez afficher les ensembles de polices fournis ainsi que le système d'exploitation sur les pages officielles de Windows et Mac OS. Et sous Unix/Linux, il n’existe aucun standard.
Afin que la page Internet s'affiche conformément à l'idée du concepteur, une propriété de police appelée font-family a été installée en CSS.
propriété de la famille de polices
La propriété font-family est constituée de familles de polices regroupées selon certaines caractéristiques.
Familles génériques :
- serif - polices avec des empattements aux extrémités ;
- sans-serif - polices sans-serif ;
- cursive - polices italiques ;
- fantaisie - polices décoratives;
- monospace - police monospace (avec des lettres de même largeur).
De cette façon, les polices similaires provenant de différents systèmes d'exploitation sont simplement sélectionnées et connectées à la page Internet, séparées par des virgules.
Voici un exemple, juste pour la perception visuelle. Nous reviendrons sur cet exemple plus tard lorsque nous envisagerons de connecter directement des polices.
Suivez simplement la logique et tout deviendra limpide.
Corps (famille de polices : Arial, "Helvetica CY", "Nimbus Sans L", sans empattement ; )
Regardons ce qui a été écrit :
- Système d'exploitation Windows - Arial ;
- OC Mac OS-Helvetica CY ;
- OC Unix/Linux-Nimbus Sans L ;
- Famille générique - sans empattement.
Polices dites sûres
Basée sur le système d'exploitation Windows, une liste de plusieurs polices sûres a été compilée.
- Arial
- Arial Noir
- Comic Sans MS
- Courrier Nouveau
- Géorgie
- Impact
- Times New Roman
- Trébuchet MS
- Verdane
Toutes ces polices sont installées sur Mac OS X, Windows et de nombreux utilisateurs Unix/Linux sur lesquels les polices Core pour le package Web sont installées.
Pour les autres utilisateurs, une table de correspondance est fournie. Il contient des polices similaires appartenant à une famille spécifique.
Tableau de correspondance et d'appartenance des polices à une famille spécifique :
| Fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Arial Noir | Helvetica C.Y. | Nimbus Sans M | Sans empattement |
| Arial | Helvetica C.Y. | Nimbus Sans M | Sans empattement |
| Comic Sans MS | Monaco CY | * (voir ci-dessous) | cursive |
| Courrier Nouveau | * (voir ci-dessous) | Nimbus Mono L | Monospace |
| Géorgie | * (voir ci-dessous) | Siècle Cahier L | Serif |
| Impact | Charbon de bois C.Y. | * (voir ci-dessous) | Sans empattement |
| Times New Roman | Times C.Y. | Nimbus Romain No9 L | Serif |
| Trébuchet MS | Helvetica C.Y. | * (voir ci-dessous) | Sans empattement |
| Verdane | Genève C.Y. | DéjàVu Sans | Sans empattement |
* Lors de la connexion de polices, vous pouvez vous y fier en toute sécurité. Le tableau prend en charge les caractères cyrilliques et l'alphabet russe.
J'ai pris le tableau lui-même dans cet article.
Connexion des polices système au site
Il existe plusieurs façons de connecter les polices système à votre site. De plus, vous pouvez connecter différentes polices à différents paragraphes. Appliquez différentes polices à des mots et des expressions individuels. Je vais maintenant essayer de considérer tout cela.
Alors faisons tout dans l'ordre.
Connecter des polices dans un fichier CSS
Si vous devez vous connecter police principale pour tout le document, il vous suffit d'ajouter le code suivant à la feuille de style :
Corps ( font-family : Arial, "Helvetica CY", "Nimbus Sans L", sans-serif ; /* connecte la police à l'ensemble du document */ font-size : 16px; /* définit en outre la taille de la police */ font -weight : 400 ; /* définit l'épaisseur de la police, ou au lieu de 400, définit la valeur sur normale */ )
Attribution d'une police pour les titres H1, H2, H3, H4, H5, H6, (ici c'est pareil, on met juste la valeur en gras pour mettre en valeur les titres) :
H1,h2,h3,h4,h5,h6( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* connecte la police aux titres */ font-weight: 600; / * définissez l'épaisseur de la police, ou au lieu de 600, définissez la valeur en gras */ )
Nous attribuons une police uniquement aux paragraphes :
P( font-family : Arial, "Helvetica CY", "Nimbus Sans L", sans-serif ; /* connecte la police aux paragraphes, peut être appliqué aux listes li, aux blocs div, aux formulaires et à d'autres éléments */ font-weight : normal; /* définit l'épaisseur de la police, ou au lieu de 600, définit la valeur sur bold */ font-size: 16px /* définit en outre la taille de la police pour les paragraphes */ )
À attribuer une police uniquement à un paragraphe spécifique, ou bloc, vous devez d'abord attribuer une classe à ce bloc dans le document HTML
Voici un paragraphe avec une police personnalisée
Et dans le tableau CSS écrivez le code suivant :
Font( font-family : Arial, "Helvetica CY", "Nimbus Sans L", sans-serif ; /* nous connectons la police à certains paragraphes, pouvons être appliqués à des listes li individuelles, des blocs div, des formulaires et d'autres éléments */ font-weight: normal; /* définit l'épaisseur de la police, ou au lieu de 600, définit la valeur sur bold */ font-size: 16px /* définit en outre la taille de la police pour les paragraphes */ )
Désormais, chaque balise - un élément HTML avec une classe .font (appelez-la comme vous voulez) se verra attribuer une police Arial, avec une police normale (400), une gras et une taille de 16 pixels.
De même, vous pouvez attribuer différentes polices à des listes, des tableaux, des blocs div entiers, des mots individuels ou des phrases.
Connecter des polices dans un document HTML
Les polices sont incluses directement dans un document HTML de la même manière qu'un fichier CSS, la seule différence réside dans la syntaxe. Vous pouvez inclure des polices dans l'en-tête du document - entre les balises
(similaire à un fichier CSS), ou en ligne - en attribuant des propriétés directement aux balises HTML.Inclure les polices dans l'en-tête, entre les balises
. Pour ce faire, ajoutez le code suivant au document html :
Je ne vais pas me répéter ici. Tout est similaire à la connexion dans le fichier CSS.
Connexion des polices en ligne, directement aux éléments du site. Laissez-moi vous donner quelques exemples :
Connecter la police au paragraphe
Voici un paragraphe avec du texte
Nous mettons en évidence un mot distinct en gras et attribuons une police distincte de la police principale
Voici un paragraphe avec du texte, et ceci mot, qui doit être souligné en gras
De même, nous attribuons des polices à n’importe quelle balise HTML.
Mais il est toujours préférable et recommandé d’attribuer des styles aux éléments via un fichier CSS. Tout d’abord, vous ne devez écrire des styles en CSS qu’une seule fois, puis attribuer uniquement la classe requise en HTML. Deuxièmement, en écrivant des styles en ligne, du contenu en double est créé. Ces propriétés et classes semblent être indexées par les moteurs de recherche, et j'ai entendu dire que le W3C souhaitait les abolir complètement. Bien qu’il soit parfois plus facile d’écrire des styles de cette façon.
Tous. Suivez les mises à jour du site, je prépare un article sur la connexion des polices non standards et originales au site afin qu'elles s'affichent correctement dans tous les navigateurs. Je vais également vous présenter plusieurs bons services où vous pouvez choisir des polices personnalisées.