Polices sûres. Polices sécurisées Polices pour la conception de sites Web

• Traduction

Il est maintenant temps d'améliorer vos conceptions avec des polices Web.

Il n'est pas exagéré de dire que la typographie Web traverse actuellement une période passionnante de sa vie. Les récents sauts technologiques nous ont rapprochés du nirvana typographique sur le web. L'étape que tout le monde attendait.

La liberté d'utiliser des polices Web en dehors de la liste sécurisée sur tous les principaux systèmes d'exploitation a été rendue possible, en grande partie, par trois facteurs technologiques majeurs et quasi simultanés : la prise en charge généralisée de la règle @font-face dans les navigateurs ; l'émergence de "stockages de polices" tels que Typekit et Fontdeck ; créer un nouveau format de police - un fichier de police WOFF archivé.

* Peu de ces polices sont disponibles pour le cyrillique, cette sélection est donc plus adaptée aux « sous-traitants ». Espérons qu'au moins certaines d'entre elles et pas seulement les polices pour les langues slaves en cyrillique apparaîtront bientôt. Ajouter des balises

La police utilisée pour afficher le texte affecte sa perception. Par conséquent, dans cet article, nous avons rassemblé les meilleures polices gratuites pour les concepteurs de sites Web de 2016 qui aideront vos documents imprimés et vos sites Web à paraître professionnels.

Top 10 des polices cyrilliques

Les polices cyrilliques de haute qualité ne sont pas faciles à trouver, mais il y en a encore beaucoup plus maintenant qu'auparavant. La liste ci-dessous contient à la fois des empattements et des sans-empattements courants, ainsi que des polices ultra-élégantes pour des occasions spéciales.

5. Oswald- une police classique sans empattement légèrement compressée qui aura fière allure sur n'importe quel appareil :

6. Jura est une élégante police de caractères à empattement incliné avec des formes rondes, idéale pour les sous-titres ou le corps du texte :

7. Exo 2 est une police technologique universelle avec plusieurs styles, il suffira donc de décorer la plupart des éléments de texte de la page :

8. pompière vous convient si vous recherchez une police élégante mais pas trop sérieuse :

9. Aclonica est une autre police de caractères dynamique pour les titres accrocheurs et les articles promotionnels imprimés :

10. Museo est une police de caractères sans empattement qui a fière allure dans les petites et les grandes tailles, ce qui signifie qu'elle convient à l'affichage des éléments de menu ainsi qu'au corps du texte de la page. Disponible gratuitement dans les variantes Museo Sans 500 et Museo Sans :

Dans cet article, nous avons fourni des polices pour les graphistes professionnels qui peuvent être utilisées pour concevoir des pages ou des documents imprimés. Un grand nombre de polices disponibles est souvent source de confusion, car elles doivent également être combinées correctement. Voici les règles de combinaison des polices pour vous aider dans cette tâche :

1. N'utilisez pas de polices trop contrastées - il se peut que chacune d'elles attire l'attention sur elle-même, distrayant le lecteur du contenu.
2. Mais ne choisissez pas trop similaire - ils fusionneront et créeront un sentiment d'incomplétude.
3. Créez une hiérarchie visuelle - rappelez-vous à quoi ressemblent habituellement les journaux imprimés : ils montrent clairement la structure des titres.
4. N'oubliez pas le contexte - après tout, le design n'est pas créé comme ça, mais en fonction des besoins d'une entreprise particulière.
5. N'utilisez pas plus de trois polices différentes sur une même page.

Pour 2018, le nombre de polices gratuites de haute qualité permet aux concepteurs de travailler pleinement sur les tâches sans aucune hésitation à choisir. Par conséquent, nous avons écrit sur les meilleures polices gratuites.

Le studio conçoit des sites Web et des applications pour Android et iOS, et nous serons heureux d'aider votre entreprise à attirer des utilisateurs avec un design unique et reconnaissable.

La première partie du chapitre est consacrée à la découverte des polices CSS. Sur cette page, vous apprendrez comment inclure des polices dans CSS, ce que sont les polices Web et comment les utiliser, quels formats de police sont disponibles, comment utiliser Google Fonts. Examinons d'abord un exemple simple d'inclusion d'une police CSS :

P ( famille de polices : Verdana; )

Ce petit bout de code signifie que toutes les balises

Police Verdana appliquée. La propriété font-family définit la police ou la famille de polices qui sera utilisée. L'affichage correct de ce style dans le navigateur de l'utilisateur dépend de l'installation ou non de la police spécifiée sur l'ordinateur de l'utilisateur. Dans notre cas, si l'ordinateur de l'utilisateur ne dispose pas de la police Verdana, le navigateur affichera la police par défaut.

À un moment donné, les concepteurs devaient également spécifier plusieurs polices de rechange au cas où la principale manquait sur l'ordinateur de l'utilisateur. Supposons que vous souhaitiez styliser votre texte dans Verdana et utiliser Trebuchet MS, Geneva et n'importe quelle police sans empattement comme solutions de secours. Il s'écrit comme ceci :

P ( famille de polices : Verdana, "Trebuchet MS", Genève, sans empattement ; )

Lors du traitement de ce code, le navigateur vérifiera d'abord la présence de la police Verdana sur l'ordinateur de l'utilisateur. Si la police est présente, le contenu des balises

Affiché dans cette police. Si la police est manquante, le navigateur recherchera la police suivante dans la liste, Trebuchet MS. Si cette police est également manquante, la présence de la police suivante, Genève, sera vérifiée. Si l'ordinateur de l'utilisateur n'a pas également Genève, le navigateur sélectionnera une autre police sans empattement disponible et affichera le texte qu'elle contient.

Note: dans le code, nous avons écrit le nom de la police Trebuchet MS entre guillemets. Il est nécessaire de mettre le nom de la police entre guillemets doubles ou simples lorsqu'elle contient des espaces.

Vous pouvez lire ce qu'est une police avec empattements (serif) et sans (sans-serif) sur la page Wikipedia.

Polices Web

La manière ci-dessus d'utiliser les polices présente un énorme inconvénient - vous êtes limité dans le nombre de polices. Vous devrez vous contenter uniquement des options qui sont probablement installées sur la plupart des ordinateurs.

Comment pouvez-vous augmenter le choix de polices pour rendre la conception de la page individuelle, ajouter de l'originalité ? Les polices Web viennent à la rescousse. Lisez le chapitre plus loin et vous apprendrez comment travailler avec eux.

Ainsi, afin d'afficher la police souhaitée dans le navigateur de l'utilisateur, nous avons besoin que cette police soit téléchargée sur son ordinateur. C'est assez facile à faire. Cette méthode de connexion des polices au CSS ouvre de très larges possibilités aux concepteurs. Mais il convient de mentionner une mouche dans la pommade: premièrement, tous les navigateurs ne prennent pas en charge un certain format de police (ce qui entraînera le fait que la police ne s'affiche pas), et deuxièmement, si le fichier de police est volumineux, il peut ralentir chargement des pages.

Prise en charge des formats

Comment traiter le problème d'incompatibilité de format de fichier ? Jetons un coup d'œil au tableau montrant les formats de police les plus populaires et découvrons quels navigateurs les prennent en charge :

Note: Vous pouvez toujours trouver des informations à jour sur la prise en charge des formats de police sur caniuse.com. Vous devez entrer le nom du format dans la barre de recherche (par exemple, ttf).

Si vous ciblez les navigateurs modernes, il vous suffira d'utiliser le format de police TTF - le plus courant et le plus utilisé. Dans le cas où vous avez besoin de plusieurs formats de la même police, vous pouvez utiliser des convertisseurs en ligne spéciaux d'un format à l'autre, puis connecter tous les fichiers un par un. Ainsi le navigateur pourra choisir le format de police avec lequel il travaille.

Inclure une police Web en utilisant @font-face

Supposons que vous ayez votre propre police unique appelée MyUniqueFont au format TTF et que vous souhaitiez que le corps du texte de votre page Web s'affiche dans cette police. La première chose à faire est de copier le fichier de police dans le dossier où se trouvent tous les autres fichiers du site. Afin de ne pas créer de désordre, vous pouvez créer un dossier séparé spécifiquement pour les polices, en le nommant, par exemple, polices .

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

La propriété font-family dans ce cas joue un rôle différent : avec elle, nous attribuons un nom à la police, afin que nous puissions utiliser ce nom plus tard lors de l'écriture d'un style :

P ( famille de polices : MyUniqueFont; )

La deuxième ligne spécifie le chemin d'accès au fichier de police. Dans notre exemple, le fichier MyUniqueFont.ttf se trouve dans le dossier des polices. Votre URL peut être différente.

Polices Google

Google facilite l'inclusion de n'importe quelle police de la collection Google Fonts. Tout ce que vous avez à faire pour commencer à utiliser la police que vous aimez est de spécifier quelques paramètres sur la page de la police sur Google, puis de copier le lien spécial vers cette police et de l'ajouter à votre document Web.

Note: toute la collection de polices de Google est disponible sur le site Polices Google. Sur la page, vous pouvez utiliser différents filtres pour rechercher des polices par catégorie, épaisseur, alphabet.

Ci-dessous, nous décrirons chaque étape de la connexion d'une police de Google. Pour comprendre de quoi nous parlons, sélectionnez n'importe quelle police de la page Google Fonts et ouvrez-la en cliquant sur le bouton Utilisation rapide.

Étape 1 : choisissez un style

Tout d'abord, sur la page de la police sélectionnée, des options pour son style seront affichées, ainsi qu'une icône de compteur de vitesse, qui ne signifie rien de plus que la vitesse de chargement de la police. Plus vous choisissez de styles de police, plus le temps de chargement sera long. Par conséquent, il est recommandé de sélectionner uniquement les styles que vous prévoyez d'utiliser.

Étape 2 : choisissez un alphabet

Plus loin sur la page, il est possible de sélectionner un jeu de caractères : latin, cyrillique, etc. Selon la police, toutes les variantes de l'alphabet peuvent ne pas être disponibles dans celle-ci. Semblable au paragraphe précédent, il est préférable de cocher la case uniquement devant l'alphabet dont vous avez besoin.

Étape 3 : ajouter du code au site

La première méthode consiste à ajouter un lien vers le serveur de Google dans le code HTML, à partir duquel la police est téléchargée. Vous devez copier le morceau de code déjà terminé et le placer entre les balises dans votre document HTML. Exemple:

...

La deuxième méthode consiste à inclure la police à l'aide de la directive @import. Le code fini se trouve dans le deuxième onglet du point 3 sur la page de la police Google sélectionnée. Il doit être ajouté tout en haut de votre feuille de style (sinon le fichier ne sera pas importé). Le code ressemble à ceci :

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

La particularité de la première méthode est que vous devrez ajouter un lien vers la police dans l'en-tête de chaque page où vous comptez l'utiliser. Ceci est facile à mettre en œuvre sur des sites avec un petit nombre de pages, mais problématique pour des ressources importantes. La deuxième méthode est pratique car le code peut être placé au tout début d'une feuille de style externe, puis toutes les pages auxquelles cette table est connectée recevront la police nécessaire, qui sera chargée à l'aide de la directive @import.

Étape 4 : styliser

Après avoir terminé les étapes précédentes, vous pouvez commencer à appliquer la police. Vous avez déjà vu comment une telle règle CSS est écrite :

P ( famille de polices : "Roboto", sans empattement ; )

Si dans la première étape vous avez choisi plusieurs options de police (par exemple, vous avez ajouté la police Bold 700 gras), alors dans la troisième étape le code changera un peu :

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Pour ensuite mettre la police en gras, écrivez le style CSS comme ceci :

P ( famille de polices : "Roboto", sans empattement ; poids de la police : 700 ; )

Note: dans Google Fonts, seules les unités standard comprises entre 100 et 900 sont utilisées pour indiquer le poids d'une police. Par exemple, normal (par défaut) équivaut à 400 (normal) et gras standard équivaut à 700 (gras).

Les principaux avantages du service Google Fonts sont :

• facilité d'utilisation (même un débutant peut gérer le service, et tout le code nécessaire est généré automatiquement - il ne reste plus qu'à le copier);
• disponibilité des polices (pas besoin de les payer) ;
• tous les formats de police utilisés sont fournis (cela signifie que chaque navigateur pourra charger exactement le format de police avec lequel il fonctionne).

Parmi les lacunes du service, il n'y a pas une très grande variété de polices, en particulier les polices cyrilliques. Soit dit en passant, il existe d'autres services similaires sur Internet, par exemple TypeKit (payant).

Résultats

Aujourd'hui, nous avons plusieurs options pour connecter des polices originales et non standard aux pages Web. Chacune de ces méthodes a ses avantages et ses inconvénients. Quelle option est préférable d'utiliser, vous devez déterminer par vous-même. Cela dépend souvent de la situation, et différentes approches peuvent être utiles dans différents cas. À ce stade, il vous suffit de savoir comment utiliser les polices en CSS.

Pour commencer à composer la mise en page, il faut notamment préciser en CSS les polices utilisées sur la page. Souvent, le concepteur utilise différentes polices pour taper non seulement le texte principal de la page, mais également divers en-têtes, 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 la page. Autrement dit, les polices peuvent être grossièrement divisées en deux catégories :

1. Des polices qui s'afficheront sans problème pour la grande majorité des utilisateurs.
2. Polices qu'un groupe d'utilisateurs suffisamment important ne possède pas.

Si le designer a utilisé des polices de catégorie 2 pour créer, par exemple, un logo ou de gros titres statiques, vous ne pouvez pas hésiter à utiliser le . L'inconvénient de l'utilisation de cette technique est la rigidité. En cas de modification du 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 la technique dépend directement de la probabilité de changer le texte. Ainsi, par exemple, le texte général de la page ne peut pas être réalisé avec des polices non standard ! Un bon designer ne ferait jamais ça. Et si un concepteur devient vert, 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 du second ? Il est clair que vous ne pouvez pas vous fier à un jeu de polices installé directement sur votre ordinateur ! Essayons de comprendre.

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, ils ont également un ensemble de polices différent. Une liste des polices standard pour les différentes versions de Windows peut être trouvée, par exemple, dans l'article Polices standard de Windows, et une liste des polices standard de Mac OS sur la page Polices fournies avec Mac OS. Quant aux systèmes d'exploitation Unix/Linux, ils n'ont pas un seul ensemble de polices. De nombreux utilisateurs de Linux utilisent le jeu de polices DejaVu, en particulier 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é les jeux de polices URW, Free et autres. Selon les mêmes statistiques, plus de 60% des utilisateurs d'Unix/Linux disposent sur leur ordinateur des polices de l'ensemble Core fonts for the Web, qui jusqu'en 2002 était officiellement disponible en téléchargement gratuit sur le site de Microsoft.

Pour que la page s'affiche comme prévu par le concepteur, dans n'importe quel système d'exploitation, il est possible de définir plusieurs polices dans la propriété CSS, séparées par des virgules.

Cette propriété spécifie une liste prioritaire de noms de famille de polices et/ou de noms de famille génériques. Selon la spécification CSS2, il existe deux types de noms de famille de polices :

1. Le nom de la famille de polices choisie. Par exemple "Times new Roman", "Arial" et autres. Les noms de famille de polices contenant des espaces doivent être placés entre guillemets. S'il n'y a pas de guillemets, tous les espaces avant et après le nom de la police sont ignorés et toute séquence d'espaces à l'intérieur du nom de la police est convertie en un seul espace.
2. Famille générique (commune). La spécification définit les familles génériques suivantes :
   • serif - polices avec empattements aux extrémités;
   • sans-serif - polices sans-serif ;
   • polices cursives - italiques ;
   • fantaisie — polices décoratives ;
   • monospace - police monospace (avec des lettres de même largeur).
   Les noms de famille génériques sont des mots clés et n'ont pas besoin d'être placés entre guillemets.

Ainsi, une police standard du système d'exploitation Windows est prise pour la conception, une police similaire pour Mac OS et Unix / Linux est sélectionnée pour elle, une famille de polices commune est définie et vous avez terminé.

Mais tout n'est pas si simple. Creusons plus en détail.

À la recherche de polices sécurisées pour le Web

Sur Internet, il existe depuis toujours des polices Web "sûres". Une police sécurisée est une police standard sur tous les systèmes d'exploitation. Puisqu'un tel état de choses ne peut qu'être rêvé, alors Les polices absolument sûres n'existent pas !

Certaines polices peuvent être qualifiées de sûres avec quelques réserves.

La base de la définition des polices "sûres" était 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 de cette utilisation est les polices Core déjà mentionnées pour le paquet de polices Web, qui, selon les statistiques, ont été téléchargées par de nombreux utilisateurs Unix/Linux.

Ce pack 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 inclus dans la livraison standard de Mac OS X (ce système d'exploitation est le plus courant parmi les utilisateurs de Mac OS) comprend toutes les polices de l'ensemble des polices principales 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é formée :

• Arial
• Noir arial
• Comic Sans MS
• Courrier Nouveau
• Géorgie
• Impact
• Times New Roman
• Trébuchet MS
• Verdana

La police Webdings contient un ensemble d'icônes et ne peut donc pas être utilisée pour le contenu. Andale Mono n'est pas largement utilisé car il ne convient pas à la lecture d'écran de tous les jours et tous les utilisateurs de Windows ne l'ont pas.

Chaque utilisateur Windows, utilisateur Mac OS X et la grande majorité des utilisateurs 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, je veux que l'idée du designer soit vue par le plus d'utilisateurs possible !

Lisez à ce sujet dans la deuxième partie de la publication.

Polices

Avec toutes les nouvelles fonctionnalités passionnantes de CSS3, il est difficile de choisir la meilleure. Mais si vous deviez choisir une seule option qui ouvre la porte à une avalanche de nouvelles perspectives que vous pouvez utiliser dès maintenant, cette option pourrait très bien être les polices Web.

Dans le passé, les concepteurs de sites Web devaient travailler avec un ensemble limité de polices adaptées aux pages Web. Les polices appropriées sont des polices connues pour fonctionner sur différents navigateurs et sur différents systèmes d'exploitation. Mais comme le sait tout concepteur Web raisonnablement capable, les polices jouent un rôle énorme dans l'impression générale d'un document. Selon la police utilisée, le même contenu peut apparaître comme strictement professionnel, décalé, démodé ou ultra-moderne.

Les développeurs de navigateurs sont lents à implémenter des polices Web personnalisées pour des raisons évidentes. Tout d'abord, ce sont des problèmes d'optimisation, car. la résolution de l'écran est bien pire que la résolution des documents imprimés. Si la police Web n'est pas correctement configurée pour s'afficher sur l'écran du moniteur, les petites lettres fusionneront en une seule ligne floue. De plus, la plupart des polices sont payantes.

Les grandes entreprises comme Microsoft étaient naturellement réticentes à ajouter des fonctionnalités qui encourageraient les développeurs Web à télécharger des polices installées sur ordinateur sur un site Web sans autorisation appropriée.

CSS3 prend en charge les polices complexes grâce à la capacité @fontface, qui s'applique comme suit :

La police requise (ou plus probablement plusieurs versions de la police pour prendre en charge différents navigateurs) est téléchargée sur le site.

Chaque police est enregistrée dans la feuille de style avec la commande @font-face.

Une police enregistrée est utilisée dans les règles de style en spécifiant son nom, tout comme les polices Web normales.

Lorsqu'un navigateur rencontre une feuille de style qui utilise une police Web personnalisée, il télécharge cette police du serveur dans son cache pour stocker temporairement des pages et des images. Le navigateur utilise alors cette police uniquement pour cette page ou ce site. Si la même police est répertoriée sur une autre page, elle doit être enregistrée sur cette page et téléchargée sur son serveur, d'où elle peut être chargée par le navigateur dans son cache.

Dans les sections suivantes, nous allons passer en revue ces étapes plus en détail.

Formats de police Web

Bien que tous les navigateurs modernes prennent en charge la fonctionnalité @font-face, tous ne prennent pas en charge les mêmes types de fichiers de polices. Par exemple, Internet Explorer, qui fournit l'utilisation de @font-face depuis des années, ne prend en charge que les fichiers EOT (Embedded OpenType). Ce format offre un certain nombre d'avantages, tels que l'utilisation de la compression pour réduire la taille du fichier de police et l'utilisation d'une licence de site Web solide afin qu'une police ne puisse pas être volée sur un site et utilisée sur un autre.

Mais le format EOT n'a jamais été très populaire et n'est utilisé par aucun autre navigateur. Au lieu de cela, les navigateurs fonctionnent avec les normes de police les plus familières utilisées dans les applications informatiques - TTF (TrueType) et OTF (OpenType PostScript). De plus, il existe deux autres types d'affichage de polices - SVG et WOFF. Le tableau ci-dessous donne une brève description de tous ces formats de police :

Formats de police intégrés

Format	Description	Utilisé dans
TTF (TrueType), OTF (OpenType PostScript)	Formats de police de bureau courants	Firefox (jusqu'à la version 3.6), Chrome (jusqu'à la version 6), Safari et Opera
EOT (OpenType intégré)	Un format spécifique aux produits Microsoft. N'a pas compris avec les navigateurs autres qu'Internet Explorer	Internet Explorer (jusqu'à IE 9)
SVG (graphiques vectoriels évolutifs)	Un format graphique générique qui peut être utilisé pour créer des polices. Produit de bons résultats, mais pas excellents - rend lentement et affiche un texte de qualité inférieure	Safari Mobile (sur iPhone et iPad jusqu'à iOS 4.2) et appareils mobiles exécutant le système d'exploitation Android
WOFF (Format de police Web ouvert)	Peut-être un format de police unique du futur. Prise en charge par les nouvelles versions de navigateur	Tout navigateur pris en charge à partir d'Internet Explorer 9, Firefox 3.6 et Chrome 6

En résumé, si vous souhaitez utiliser la fonctionnalité @font-face et prendre en charge un large éventail de navigateurs, vous devez fournir votre police dans plusieurs formats différents. Au minimum, la police doit être fournie au format TTF ou OTF (pas de différence), EOT et SVG. Il est bon (mais pas nécessaire) de fournir également une police au format prometteur WOFF, qui pourrait devenir plus populaire et mieux pris en charge à l'avenir. (L'un des avantages de ce format est l'utilisation de fichiers compressés, ce qui réduit le temps de téléchargement.)

Même si vous suivez toutes les règles ci-dessus et fournissez tous les formats de police requis, attendez-vous à quelques problèmes. En particulier, les problèmes suivants surviennent parfois avec les polices Web :

De nombreuses polices ne s'affichent pas correctement sur le système d'exploitation Windows XP. l'anticrénelage est désactivé dans les paramètres de nombreux ordinateurs avec ce système d'exploitation. (Et sans anti-aliasing appliqué, les polices semblent très peu attrayantes.)

Des utilisateurs se sont plaints de problèmes d'impression de certaines polices intégrées à partir de certains navigateurs ou systèmes d'exploitation.

Certains navigateurs sont concernés FOUT (Flash de texte sans style). Ce phénomène se produit lorsqu'une police intégrée ne se charge pas à temps et que la page est d'abord rendue dans la police de secours, puis restituée dans la police intégrée. Ce problème est particulièrement visible dans les anciennes versions du navigateur Firefox. Si cela vous dérange, vous pouvez utiliser la bibliothèque JavaScript de Google, qui permet au développeur de définir des styles de secours qui sont utilisés à la place des polices intégrées déchargées, lui donnant ainsi un contrôle total sur le rendu du texte à tout moment.

Bien que ces problèmes mineurs surviennent occasionnellement, la plupart d'entre eux sont progressivement résolus avec la sortie de nouvelles versions de navigateur. Par exemple, le navigateur Firefox minimise désormais l'effet FOUT en attendant jusqu'à trois secondes le chargement d'une police intégrée avant d'utiliser une police de secours.

Jeux de polices

Vous vous demandez probablement déjà où vous procurer les différents fichiers de polices dont vous pourriez avoir besoin ? Le moyen le plus simple consiste à télécharger un jeu de polices prêt à l'emploi sur Internet, obtenant ainsi tous les fichiers de polices requis. L'inconvénient de cette approche est que votre choix est limité à ce que vous pouvez trouver sur le Web mondial. Pour vous aider à trouver des ensembles de polices Web, l'un des meilleurs sites de polices, Font Squirrel, peut être recommandé. L'image ci-dessous montre certains des ensembles de polices fournis sur ce site :

Le site Font Squirrel propose plusieurs centaines de polices de haute qualité à télécharger, organisées en sections par catégorie (comme Calligraphic, Grunge ou Retro, par exemple). Mais la meilleure partie est que toutes ces polices sont gratuites pour toute utilisation, que ce soit sur un ordinateur personnel pour créer des documents ou sur une page Web sur Internet.

Le jeu de polices sera téléchargé sous forme de fichier compressé ZIP contenant plusieurs fichiers de polices dans différents formats. Pour utiliser une police dans votre page Web, des fichiers de différents formats de police doivent être téléchargés sur un serveur Web dans le dossier de cette page Web. Ensuite, la police doit être enregistrée pour pouvoir être utilisée dans la feuille de style. L'enregistrement se fait avec une règle complexe @font-face au début de la feuille de style, qui ressemble à ceci :

@font-face ( font-family: "MetrophobicRegular"; src: url("Metrophobic-webfont.eot"); src: local("Metrophobic"), url("Metrophobic-webfont.eot?#iefix") format( "embedded-opentype"), url("Metrophobic-webfont.woff") format("woff"), url("Metrophobic-webfont.ttf") format("truetype"), url("Metrophobic-webfont.svg# MetrophobicRegular") format("svg"); font-weight: normal; font-style: normal; )

Les lignes du code ci-dessus remplissent les fonctions suivantes :

L'expression @font-face enregistre la police pour une utilisation ultérieure dans la feuille de style.

La police peut recevoir n'importe quel nom. Ce nom sera utilisé plus tard lors de l'utilisation de la police.

Le format EOT doit être spécifié en premier, car le reste de la règle confond Internet Explorer, et il ne fait pas attention aux autres formats. La fonction de feuille de style url() indique au navigateur de télécharger le fichier à partir de l'URL spécifiée. Si la police se trouve dans le même dossier que la page Web, vous pouvez simplement spécifier le nom du fichier ici.

La fonction local() indique au navigateur le nom de la police, et si cette police est installée sur l'ordinateur du visiteur, le navigateur utilise la police locale. Mais dans de rares cas, cela peut causer des problèmes. Par exemple, selon l'endroit où la police est installée sur l'ordinateur du visiteur, les ordinateurs Mac OS X peuvent afficher un avertissement de sécurité ou une autre police portant le même nom que la vôtre peut être chargée. Pour cette raison, les développeurs Web spécifient parfois un nom de fichier qui n'existe évidemment pas afin que le navigateur ne trouve pas la police locale. Tout caractère sans signification peut être utilisé comme simple nom de ce type.

La dernière étape consiste à indiquer au navigateur les autres fichiers de police qu'il peut utiliser. S'il existe un fichier de police de type WOFF, spécifiez d'abord ce fichier, car. ce format offre la meilleure qualité de police. Spécifiez ensuite le fichier de police au format TTF ou OTF, et le fichier au format SVG en dernier.

En enregistrant une police Web avec la fonction ©font-face, vous pouvez l'utiliser dans n'importe quelle feuille de style. Pour ce faire, nous utilisons la propriété déjà familière font-family, à laquelle est attribuée une valeur sous la forme du nom de la famille de polices enregistrée à l'aide de la fonction @font-face (à la ligne 2). Voici un exemple d'utilisation de cette police dans une règle de feuille de style :

Corps ( famille de polices : "MetrophobicRegular"; )

Cette règle applique la police Web à toute la page, bien qu'elle puisse, bien sûr, être limitée à certains éléments ou classes appliquées. Cependant, une police doit être enregistrée avant de pouvoir être utilisée dans une règle de feuille de style. Si vous suivez ces étapes dans l'ordre inverse, la police ne fonctionnera pas correctement.

Polices Web Google

Une autre source de polices Web gratuites est la Polices Web Google. Sa particularité est que l'utilisateur n'a pas à se soucier des formats de police, car. Google détecte le navigateur du visiteur de la page et envoie automatiquement le fichier de police dans le bon format.

Pour utiliser la police Google dans vos pages, procédez comme suit :