Quelles sont les polices de sécurité Web?

Pratiquement chaque ordinateur possède un ensemble de polices installées. Ces polices sont généralement mis là par le fabricant de l'ordinateur ou qui sont par défaut des ensembles de polices pour le système d'exploitation que l'ordinateur utilise. Il est possible d'installer des polices supplémentaires sur vos propres.

Cependant, tous les jeux de polices sont créés égaux. Ordinateurs différents peuvent avoir des ensembles très différents de polices installées, et les utilisateurs d'ordinateurs les plus occasionnels ne sais jamais la différence. Lorsque vous concevez une page Web, vous devez garder cela à l'esprit. Si vous décidez d'utiliser une police de caractères sur votre page que le visiteur n'a pas, cette police paraîtront différents (et souvent vilainement) sur la machine du visiteur.

Alors, comment vous assurez-vous que vos polices aura l'air bien sur le plus grand nombre d'ordinateurs out there? Facile: utiliser des polices de sécurité Web. Que l'informatique évolue, les considérations pour le Web ont pris effet pour les systèmes d'exploitation modernes et les navigateurs Web. Parmi ces considérations est une liste des polices de sécurité Web que les concepteurs Web peuvent utiliser pour s'assurer que leurs polices de rendre correctement. Polices Web sécuritaires sont un ensemble de polices très communs qui sont pré-installés sur l'ordinateur à peu près tous là-bas. Quelques (très) vieux ordinateurs mai ne pas avoir quelques-unes des polices que l'on considère enchaînement sûr aujourd'hui, mais ils sont une minorité.

Qui devrait utiliser des polices Web sécuritaire?

Chaque concepteur Web doit utiliser des polices de sécurité Web. Il ya quelques cas où vous souhaitez utiliser une spéciale, le non-Web-font sûr, mais ces cas sont rares (et nous allons discuter de cas comme celui-ci dans un peu). Vous voulez vous assurer que vos polices sont toujours lus facilement par vos utilisateurs. En gardant vos polices lisibles avec des polices de sécurité Web, vous conservez le lectorat et de rendre votre site plus accessible à un plus large éventail de personnes.

Je crois que la meilleure réponse à la question «Qui doit utiliser des polices de sécurité Web» peut se résumer en un mot: «vous».

Pourquoi utiliser des polices Web sécuritaire?

Comme expliqué plus haut, si vous utilisez une police sur votre page que votre visiteur n'a pas installé, son navigateur choisira une police de secours que vous mai pas l'intention d'apparaître sur votre page. Souvent, le résultat est un texte qui n'est pas laid du tout agréable à lire.

Si un visiteur ne peut pas lire avec fluidité votre site, puis il ou elle ne peut obtenir l'information dont vous avez fournis, et c'est toute la raison de vos visiteurs de votre site! Même si le texte de votre site est laid et que quelqu'un décide de se frayer un chemin à travers elle pour votre contenu, il faudra encore regarder déplaire et vous retiendrez moins de lecteurs. Un site Web sans lecteurs est un déchet.

Utiliser des polices de sécurité Web est juste une partie d'un ensemble plus vaste de pratiques de conception qui permettent à votre site convivial. Ne forcez pas les yeux d'un lecteur, ne font pas d'informations difficiles à trouver, et assurez-vous qu'ils peuvent progresser grâce à votre site et de contenu sans avoir à y penser. (Vous pouvez lire un article détaillé sur la construction de votre typographie ici.) Si, à tout moment, quelqu'un regarde votre site et prend même une milliseconde à penser: «Ugh, c'est un texte laid», vous avez l'expérience en pot. Idéalement, toute la rencontre avec votre site doit être lisse comme de la soie, et en utilisant une police de sécurité Web est une grande partie de la réalisation de cet objectif.

Quand utiliser les polices de sécurité Web?

En règle générale, toujours utiliser des polices de sécurité Web pour le contenu de votre page.

Où sont les polices Web en toute sécurité en vigueur?

Vos en-têtes de texte brut, les liens et les contenus doivent tous utiliser les polices de sécurité Web. Si vous prévoyez d'utiliser du texte normal pour votre logo, vous devez également utiliser une police de sécurité Web pour cela. En fait, l'une des rares exceptions à l'utilisation des polices Web sûre est que si vous décidez d'utiliser du texte dans vos images. Si vous prévoyez d'utiliser des images pour certains de vos textes, alors il est dangereux d'utiliser d'autres polices parce que les images apparaissent les mêmes sur l'ordinateur du visiteur comme elle le fait toi-même. Toutefois, vous ne devriez jamais utiliser des images pour l'ensemble de votre texte. Images pour texte doit être utilisé avec parcimonie. Logos et certains en-têtes mai utiliser des images. Texte Tout ce qui est contenu ou ailleurs normal, cependant, devrait utiliser une police de sécurité Web.

Comment puis-je utiliser les polices de sécurité Web, et ceux qui sont sans danger?

Inclure les polices de sécurité Web de votre CSS avec les règles de famille de police ou la police. (J'ai inclus les plus utiles ci-dessous pour vous.)

Il ya un bon nombre de polices de sécurité Web. Beaucoup d'entre eux semblent très similaires à d'autres polices de sécurité Web et dans la pratique, elles sont essentiellement les mêmes. Une règle CSS pour votre famille de police, par exemple, mai ressembler à ceci:

  :  Arial ,  Helvetica ,  sans-serif ; font-family: Arial, Helvetica, sans-serif; 

La première police énumérés, Arial, une police est extrêmement courante disponible sur la plupart des ordinateurs, ainsi vous pouvez sans risque parier qu'il sera affiché correctement à l'écran d'un visiteur quand ils visitent votre site. Dans de rares cas, un ordinateur mai ne pas avoir installé Arial, cependant. Vieux ordinateurs Apple, par exemple, ne pas avoir mai Arial, ainsi que plusieurs autres polices. Helvetica, cependant, est installé un peu partout parmi les ordinateurs Apple, et il semble très semblable à Arial, Helvetica est donc figurent dans la deuxième. Lorsqu'un navigateur ne peut pas trouver la première police énumérés, il recherche les polices suivant dans l'ordre. Dans ce cas, Helvetica seront utilisés lors de l'Arial est pas installé.

Et dans des cas extrêmement rares, certains ordinateurs mai ne pas avoir Arial ou Helvetica installé. Dans ce cas, "sans-serif" est utilisé. Il s'agit d'une solution de secours, police par défaut que le navigateur Web utilisera si elle ne peut pas trouver l'une des polices répertoriées précédemment.

Il existe quatre types (ou familles) des polices de sécurité Web: serif, sans serif, cursive, et monospace. Chacun d'eux a son propre police secours (comme sans-serif ci-dessus). Les solutions de repli pour chaque famille, sont respectivement: serif, sans-serif, cursive, et monospace. Vous constaterez que les règles font presque toujours inclure une de ces solutions de repli, et toujours en dernier.

Les polices sont listées en format CSS afin que vous puissiez facilement copier et collez-les si vous n'avez pas envie de taper leur réalisation. Cela est probablement la façon dont vous allez voir la plupart des polices de l'époque, de toute façon.

Serif Fonts Safe Web

L'art du design Web a beaucoup de lignes directrices générales qui se sont emparés que le Web est devenu plus fermement ancrée dans le 2.0 la mise Web. Nous avons d'autres articles qui traitent le moment d'utiliser les polices serif et sans serif, tous donc je vais dire ici est que, en général, empattements ont généralement été utilisés principalement pour des rubriques. Voici les polices de sécurité Web que vous pouvez utiliser pour votre empattements.

Sans Serif Fonts Safe Web

Sans empattements sont généralement utilisées pour la majeure partie du contenu sur un site Web.

Monospace Web Safe Polices

Monospace polices sont utiles lorsque vous voulez vous assurer que tous les personnages de line up avec exactement la même largeur. Afficher du code ou des données tabulaires, sans l'aide d'un tableau sont bons usages pour les polices monospace.

"Cursive" Web Safe Polices

Actuellement, il n'ya pas beaucoup de sécurité Web les polices cursives. Il ya un "cursive" de repli, comme les sans-serif, serif et monospace, mais pour la plupart, cela est très utilisé. Il ya du débat, même si Comic Sans MS est compatible avec un match de la police de repli cursive. Certains pensent Comic Sans MS appartient aux polices sans empattement, et d'autres disent que c'est la police la plus proche à une normale "cursive"-comme l'impression que vous pouvez actuellement obtenir dans une police de sécurité Web.

En tout cas, cursive et Comic Sans MS sont généralement évités. Personnellement, mon opinion est que vous devez éviter ces deux tout à fait.

Dans certains cas, puis-je utiliser d'autres polices?

Oui, il existe quelques exceptions à la "Toujours utiliser des polices de sécurité Web" règle. Parfois, en raison de circonstances hors de votre contrôle, vous devez absolument utiliser une police qui n'est pas considéré comme enchaînement sûr. Un client, par exemple, mai avoir une entreprise qui a utilisé la même police pour des signes de leur entreprise, les marques et les logos pour plus d'un siècle. Apporter une entreprise comme celle sur le Web sans perdre sa longue intégrité et la reconnaissance de la marque serait vraisemblablement impossible avec une police de sécurité Web.

Ou, peut-être vous, en tant que designer, veulent expérimenter de conception et de prendre les choses au bord des saignements. J'ai toujours cru que l'art authentique et de l'expérimentation réside dans la capacité de l'artiste de voir au-delà du champ normal et pas loin des pratiques habituelles. Si vous partagez cette idée, puis sans doute à un moment ou vous allez chercher des moyens de bricoler avec les non-Web-polices de sécurité dans vos pages.

Voici les meilleures façons d'utiliser la non-Web-fonts en sécurité dans votre page, et continuer à avoir les rendre correctement sur la plupart des ordinateurs là-bas.

Fournir des téléchargements pour vos utilisateurs

Si vous souhaitez utiliser une police de caractère très spécifique de votre site, vous pouvez inclure un lien vers le fichier de police sur votre page. De cette façon, les visiteurs peuvent télécharger et installer la police, puis de consulter votre page et voir la police rendue correctement sans de réels inconvénients.

C'est beaucoup de travail à attendre le visiteur à faire, cependant, juste pour voir votre site comme vous voulez qu'ils le voient. Le visiteur ne veulent généralement rien faire de particulier juste pour afficher une page Web. Exiger que quelqu'un passer par la peine de télécharger et d'installer une police juste pour voir votre site est un excellent moyen de perdre des visiteurs. Les chances sont, la plupart de vos visiteurs ne sais pas par où commencer l'installation de la police, de toute façon.

Il ya aussi quelques problèmes juridiques potentiels si vous prenez cette route. Si vous n'êtes pas la personne qui a créé la police, puis plus probable que vous n'avez pas les droits légaux de le distribuer.

À cause de ces défauts majeurs, cette méthode est largement évitée.

Utiliser des images

Lorsque vous utilisez un éditeur d'image comme Photoshop, The Gimp, ou même MS Paint, vous pouvez créer des images qui utilisent n'importe quelle police vous le souhaitez. Mettez cette image sur votre page et ça fera le même sur l'ordinateur d'un visiteur comme il le fait sur le vôtre. Voici une image qui utilise trois non-Web-fonts sûr qui est venu pré-installé sur mon Macbook.

Si vous, en tant que visiteur de ce site, sont sur un Mac, un PC Windows, dans votre saveur préférée de Linux, ou même le surf sur autre chose comme un PDA ou un iPhone, les polices ci-dessus montrent correctement. Cela est vrai même si votre PC n'a pas ces polices installées.

Il s'agit d'un excellent moyen d'afficher n'importe quelle police que vous souhaitez pour votre logo, publicités, ou certains de vos têtes. Toutefois, on ne peut pas s'appuyer sur des images pour le contenu effectif. Un visiteur ne peut pas sélectionner le texte avec la souris, ce qui signifie que si ils veulent copier et coller votre texte quelque part (par exemple, pour envoyer votre nom commercial à un ami), ils ne peuvent le faire. Aussi, le texte dans les images ne peuvent pas être lus par les lecteurs d'écran, que certaines personnes à mobilité réduite utilisent pour naviguer sur le Web. Le texte que vous avez dans vos images ne seront pas accessibles à ces personnes. De plus, certaines personnes naviguez avec les images soient désactivés ou ont leurs images bloquées par un tiers, comme dans certains bureaux d'entreprises qui utilisent un serveur proxy. Enfin, les moteurs de recherche ne peut pas lire correctement et le texte dans des images catalogue.

Dans l'ensemble, tout texte que vous utilisez dans vos images devraient essentiellement servir de décoration volontariste. Il ya une alternative bien: utiliser une technique de remplacement de l'image.

Image des techniques de remplacement

Il existe des techniques que vous pouvez utiliser dans votre CSS et (X) HTML qui vous permettra d'utiliser des images à la place du texte normal tout en préservant l'accessibilité de votre site et adaptée aux moteurs de recherche. Avis de l'en-tête qui lit les «techniques de remplacement d'images" est une image. Il utilise une police appelée Rockwell (qui a également était pré-installé sur mon MacBook) et la police est verte plutôt que le noir typiques, nous avons utilisé.

Cet en-tête utilise une technique de remplacement d'image appelé à pixel unique Remplacement. On utilise les CSS et (X) HTML pour afficher l'image, mais si quelqu'un a le CSS est désactivé, l'image ne s'affichera pas. Pour résoudre ce problème, il ya un élément span cachés qui affichera toujours soigneusement le texte "les techniques de remplacement d'images" pour cet en-tête.

Quant aux lecteurs d'écran et d'autres situations où les images peuvent ne pas être accessibles, il ya une image 1 pixel avec texte alternatif qui se lit «les techniques de remplacement d'images." De cette façon, nous ne sommes pas nuire à l'accessibilité et les lecteurs d'écran encore ramasser le texte tel que nous le voulons.

Un des seuls inconvénients à l'utilisation de cette technique est qu'il ajoute des éléments extérieurs à votre (X) HTML. Ils ne nuisent pas à quelque chose, mais ils n'ajoutent plus de volume à votre travail et la taille du fichier de votre document. Il rend également plus difficile à suivre lors de la lecture du code de votre site. Même comme ça, c'est un moyen fantastique pour ajouter la typographie riche pour votre site.

Le lecteur attentif mai ont déjà pris un coup d'oeil à cette section de l'article pour obtenir un look à la CSS j'ai utilisé ici. S'il vous plaît noter que j'ai dû modifier un peu la technique pour une utilisation sur WPDFD car elle a déjà pré-styles existants. Si vous voulez essayer cette technique de remplacement d'images sur votre site, permettez-moi de vous fournir le meilleur code de travailler avec.

Je vais même vous donner es images de travailler avec. Premièrement, télécharger et sauvegarder celles-ci. (Faites un clic droit et Enregistrer.)

• spacer.gif - oui, je sais le sentiment général à propos spacer.gif. Nous allons le garder entre nous, juste pour cette fois.
• irt.gif. C'est l'image d'en-tête.

Ensuite, ajoutez ce code à votre fichier CSS.

  # header ( 
  :  250px ; width: 250px; 
  :  30px ; height: 30px; 
  :  url(irt.gif) ; background-image: url (irt.gif); 
  ) 
  span # header ( 
  :  none ; display: none; 
  ) 

Enfin, mettre en œuvre le remplacement de cette image dans votre (X) HTML:

  Image des techniques de remplacement 

L'afficher dans un navigateur, et vous devriez voir l'effet au travail. Vous pouvez trouver une liste de techniques d'image de remplacement sur au mezzoblue, qui est où j'ai été initié à cette technique particulière image de remplacement.

Utilisez sIFR

sIFR (Scalable Inman Flash Replacement) est peut-être le moyen le plus populaire d'utiliser les polices, les riches belle sur votre page. En effet, vous pouvez voir un exemple de cela dans le haut de chaque article WPDFD. Titre de cet article, «Knowing propos des polices Web sécuritaire», est affiché pour la plupart des utilisateurs dans une police appelée inter-Etats, qui n'est généralement pas une police de sécurité Web.

Il ya seulement quelques étapes à la mise en place sIFR, y compris un processus appelé "font tuning" (ne vous inquiétez pas, c'est pas difficile), mais il faut en général encore même un designer expérimenté / développeur Web à peu près 10 minutes pour la mise en place à travers un site qui n'a pas utilisé précédemment il.

Il est facile à mettre en place, cependant, et ses avantages sont nombreux. Elle fournit du texte, évolutives accessibles dans une police de votre choix en laissant tomber un élément en Flash avec un fond transparent à la place de votre texte original. Si un visiteur de votre site ne possède pas le JavaScript, Flash ou soit installée, alors que votre texte est toujours affiché sur votre page dans un styles CSS, en-tête normale.

Personnellement, sIFR est la méthode que je recommande si vous voulez vraiment renforcer la typographie de votre site. Il est important de noter, cependant, que sIFR doit pas être utilisé pour le contenu principal de votre site. Utilisez-les en-têtes, des citations, des slogans, et d'autres petits, mais significatifs, des morceaux de texte.

Actuellement, sIFR 2 est la norme, mais sIFR 3 est en bêta test. Lorsque sIFR 3 est disponible en bêta et je n'ai eu le temps de jouer avec lui, j'ai bien l'intention de couvrir ce sujet plus en détail. Dans l'intervalle, si les intérêts sIFR vous, mais vous ne voulez pas passer par toutes les configuration, vous pouvez jeter un oeil à un outil qui fait tout pour vous.

Donc là vous l'avez!

Eh bien, tu es venu sur cette page et à lire à travers cet article de sorte que vous pouvez rester informé sur les polices de sécurité Web, et maintenant vous le savez tous les aspects les plus importants d'entre eux. C'est probablement une bonne idée pour marquer cette page afin que vous puissiez avoir une liste des polices Web pratique sécuritaire en tout temps.

par D. Rodriguez