Si vous débutez dans la conception de sites Web, vous pensez peut-être à quelque chose comme : « Pourquoi devrais-je me limiter à cela ? petit ensemble des 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 (environ. 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é @famille de polices, ce qui facilite cette tâche.
Liste
| @font-family signifiant | les fenêtres | Mac | Famille |
|---|---|---|---|
| Arial, Helvetica, sans empattement | Arial | Arial, Helvética | sans empattement |
| "Arial Black", Gadget, sans empattement | Noir arial | 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 Lucida | 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, empattement | 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 de caractères ne sont affichées que dans Internet Explorer, dans d'autres navigateurs, ils sont généralement remplacés 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 consulter les jeux de polices fournis ainsi que le système d'exploitation sur le site officiel. Pages Windows,MacOS. Mais sous Unix/Linux, il n'y a pas ensemble 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
- Noir arial
- 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 sont installées. la toile.
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 :
| les fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Noir arial | 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 Web. 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, blocs div, formulaires et autres éléments */ font-weight: normal; /* définit l'épaisseur de la police, ou au lieu de 600, définit la valeur sur gras */ font-size: 16px; /* définit en outre la taille de la police des 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 */ )
Maintenant, pour chaque balise - élément HTML avec le class.font (appelez-le comme vous voulez), la police se verra attribuer une police Arial, avec un poids normal (400) 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
. A cet effet dans document HTML ajoutez ce code:
Je ne me répéterai pas 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 soulignons en gras un mot séparé et attribuer une police distincte de la police principale
Voici un paragraphe avec du texte, et ceci mot, qui doit être souligné en gras
Voici le lien
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 sélectionner des polices personnalisées.
L'une des tâches principales de la conception Web consiste à choisir le bon polices standards. Services d'intégration de polices tels que GoogleWeb Les polices, ou Typekit, ont été créées comme alternative dans le but d'apporter quelque chose de nouveau.
Ils sont très faciles à utiliser. Prenons comme exemple Service Google Polices Web.
Choisissez la police Open Sans, Droid Serif ou Lato. Écrivez le code et collez-le dans l'élément Document HTML. Vous êtes prêt à le référencer en CSS ! L'ensemble du processus n'a pas pris plus de 60 secondes. Et tout est totalement gratuit.
Qu'est-ce qui ne va pas ?
Certaines polices peuvent ne pas être accessibles à tout le monde. Et cela signifie qu'il peut y avoir des problèmes. Etes-vous satisfait de ce que vous avez choisi ? belle police pour le site, et le visiteur de la page Web voit à la place une écriture moche.
Cela ne se produira pas si vous implémentez une option de sauvegarde.
Dans quelle mesure est-il important d’utiliser des polices Web sécurisées ?
Chaque appareil possède son propre ensemble de polices préinstallées. Lequel dépend du système d’exploitation. Le problème est qu’il existe de légères différences entre eux.
Qu’en est-il des sites Web ? Comme celui-ci? La police que vous voyez n'est peut-être pas celle qui a été initialement spécifiée pour le site.
Qu'est-ce que ça veut dire? Disons que le concepteur a choisi une famille de polices payantes pour le site. Si vous ne les avez pas installés et que vous n'êtes pas fourni par un service Web spécial, la police que vous voyez est l'une des options standards. Par exemple, Times New Roman.
Par conséquent, le texte sur votre écran peut paraître tout simplement horrible.
Et ici polices standards pour le site disponible sur tous les systèmes d’exploitation. Il s'agit d'une petite collection disponible sur Windows, Mac, Google, ainsi que Unix et Linux.
À l’aide de cette sélection, les concepteurs ainsi que les propriétaires de sites Web peuvent spécifier quelle police doit être utilisée comme police de sauvegarde. Cela vous donne la possibilité de contrôler l’apparence de la page sur différents appareils.
Comme option de secours, le développeur sélectionne une police très similaire à celle d'origine, et c'est celle-ci qui sera présentée à l'utilisateur.
Jetons un coup d'œil à une sélection des plus populaires polices standards HTML.
15 meilleures polices Web sécurisées
Arial
Considéré comme standard dans la plupart des cas. La police la plus courante " sans empattement"ou polices sans empattement ( qui n'ont pas d'empattements aux extrémités des lettres). Il est souvent utilisé sous Windows pour remplacer d’autres caractères.
Helvétique
Helvetica est une bouée de sauvetage pour les designers. Ce police Web standard fonctionne presque toujours ( au moins comme filet de sécurité pour les autres polices).
Times New Roman
Remplit le même rôle pour les polices avec empattement qu'Arial pour les polices sans empattement. C'est l'un des plus populaires sur Appareils Windows. Ce Version mise à jour police Old Times.
Fois
CSS police standard Le Times est familier à la plupart. Beaucoup de gens se souviennent de lui en petites lettres dans les colonnes étroites des vieux journaux. Le type d’impression le plus courant qui est devenu une tradition.
Courrier Nouveau
Semblable au Times New Roman et utilisé comme variante vieux classiques. Elle est également considérée comme une police à espacement fixe. Contrairement aux polices avec et sans empattement, tous ses caractères ont la même largeur.
Courrier
Une ancienne police à largeur fixe utilisée comme solution de secours sur presque tous les appareils et systèmes d'exploitation.
Verdane
Verdana peut à juste titre être considérée comme une véritable police Web ( vraie police Web) grâce à des lignes simples faisant office d'empattements, ainsi que grande taille. Ses lettres sont légèrement allongées, elles sont donc faciles à lire sur l'écran.
Géorgie
La police Web standard Georgia est similaire en forme et en taille à la police Verdana. Ses caractères sont plus grands que les autres polices de même taille. Mais il vaut mieux ne pas l'utiliser en combinaison avec d'autres. Le même Times New Roman ressemble à un nain en comparaison.
Palatin
Palatino remonte à l’époque de la Renaissance. Pas de blagues. C'en est un autre grande police, ce qui est idéal pour Internet. Il est couramment utilisé dans les titres et les publicités.
Garamond
Autre fonts baptismaux anciens apparus au XVIe siècle à Paris. Sa nouvelle version améliorée est livrée en standard sur la plupart des appareils Windows. Plus tard, cette police a été adoptée par d'autres systèmes d'exploitation.
Livreur
Livreur ( ou Bookman à l'ancienne) - un des meilleures polices standard pour les titres. Son caractéristique- lisibilité même en utilisant un petit format.
Comic Sans MS
Comic Sans MS est une alternative amusante aux polices serif.
Trébuchet MS
Il s'agit d'une police sur le thème médiéval développée à l'origine par Microsoft au milieu des années 90. Il était utilisé sous Windows XP. Aujourd'hui, il est utilisé pour composer le texte principal.
Noir arial
Analogue police standard pour le site Arial. Certes, il est plus grand, plus épais et plus résistant. Ses proportions sont similaires à celles de la police Helvetica. Et est-ce important. Ils peuvent remplacer avec succès Helvetica sans avoir à acheter une licence.
Impact
Une autre excellente police pour mettre en évidence les titres. Cela fonctionne bien dans une phrase courte composée de plusieurs mots, ainsi que dans des phrases longues.
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 dont vous avez assez grand groupe il n'y a aucun utilisateur.
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. Liste des polices standards Versions Windows Vous pouvez voir par exemple dans l'article Polices Windows standards, et une liste des polices Mac OS standards 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. Beaucoup Utilisateurs Linux utilisez le jeu de polices DejaVu, en particulier sur Ubuntu elles sont installées 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 pour Téléchargement Gratuit sur le site de Microsoft.
Pour que la page s'affiche comme le concepteur l'a prévu sur n'importe quel système d'exploitation, il est possible de Propriété CSS font-family spécifie plusieurs polices, 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 des familles ancestrales sont mots clés et ne doit pas nécessairement être 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 nous ne pouvons que rêver d’un tel état de choses, il n’existe pas de polices absolument sûres !
Certaines polices peuvent être qualifiées de sûres avec quelques réserves.
La base pour déterminer les polices « sûres » était les polices du système d’exploitation le plus courant. Systèmes Windows, qui sont également utilisés 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
- Noir arial
- 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 adapté à la lecture quotidienne de texte sur écran et tout le monde ne l'a pas Utilisateurs Windows.
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 visible autant que possible plus grand nombre utilisateurs!
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, personnes intelligentes inventé Unicode, qui 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.
| les fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Noir arial | 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 y a Grande chance que cette police elle-même est 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 tous les utilisateurs Windows et tous Utilisateurs Mac OS X), alors la page sera affichée dans cette police. Si l'utilisateur ne dispose pas de cette police, alors la page Utilisateur russophone Mac OS 9 apparaîtra définitivement comme standard police système Helvetica CY, et pour un utilisateur Unix/Linux, il sera affiché dans la police Nimbus Sans L, installée 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 affichage correct Cet ensemble destiné aux utilisateurs de Mac OS 9, au lieu d'Helvetica non cyrillique, il est logique de spécifier la même police Helvetica CY standard pour Mac OS 9, 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. Tous grande quantité les 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.
| les fenêtres | MacOS | famille ancestrale |
|---|---|---|
| Console Lucida | 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.
| les fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Noir arial | 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 | 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.
| les fenêtres | MacOS | Unix/Linux | famille ancestrale |
|---|---|---|---|
| Console Lucida | 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
- Noir arial
- 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 de l'alphabet 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.