Comment intégrer des polices de caractères en HTML?
j'essaie de trouver une solution décente (surtout du côté du référencement) pour intégrer des polices dans les pages web. Jusqu'à présent j'ai vu la solution W3C , qui ne fonctionne même pas sur Firefox, et cette solution assez cool . La deuxième solution est pour les titres. Existe-t-il une solution pour le texte intégral? J'en ai marre des polices standard pour les pages web.
Merci!
6 réponses
les choses ont changé depuis que cette question a été posée et répondue à l'origine. Il y a eu beaucoup de travail sur l'intégration des polices de caractères dans les navigateurs pour que le corps du texte fonctionne en utilisant l'intégration @font-face.
Paul Irish mettre ensemble pare-Balles " @font-face syntaxe en combinant les tentatives de plusieurs autres personnes. Si vous passez en revue l'article entier (pas seulement le haut) il permet une seule @ font-face déclaration pour couvrir IE, Firefox, Safari, Opera, Chrome et éventuellement d'autres. En gros, cela peut alimenter OTF, EOT, SVG et WOFF d'une manière qui ne casse rien.
extrait de son article:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
travaillant à partir de cette base, Font Squirrel mis ensemble une variété d'outils utiles, y compris le @font-face Generator qui vous permet de télécharger un fichier TTF ou OTF et obtenez des fichiers de police auto-convertis pour les autres types, ainsi que des CSS pré-construits et une page HTML de démonstration. Font Squirrel a aussi des centaines de kits @font-face .
Soma Design a également mis en place le FontFriend Bookmarklet , qui redéfinit les polices sur une page à la volée afin que vous puissiez essayer des choses. Il inclut le soutien glisser-déposer @font-face dans FireFox 3.6+.
plus récemment, Google a commencé à fournir Google Web Fonts , un assortiment de polices disponibles sous licence Open Source et servies à partir des serveurs de Google.
Restrictions De Licence
enfin, WebFonts.info a mis en place une belle liste wiki de polices disponibles pour @font-face embedding basé sur les licences. Il ne prétend pas être une liste exhaustive, mais les polices devraient être disponibles (éventuellement avec des conditions comme une attribution dans le fichier CSS) pour l'intégration / liaison. il est important de lire les licences , car il y a des limitations qui ne sont pas poussées en avant évidemment sur les téléchargements de police.
Essayer Facetype.js , vous convertissez votre .TTF font dans un fichier Javascript. Compatible SEO complet, prend en charge FF, IE6 et Safari et se dégrade avec élégance sur les autres navigateurs.
Non, il n'y a pas de solution décente pour le type de corps, sauf si vous êtes prêt à répondre seulement à ceux avec des navigateurs de bord de saignement.
Microsoft a WEFT , leur propre technologie propriétaire d'intégration de police, mais je n'ai pas entendu parler de cela depuis des années, et je ne connais personne qui l'utilise.
Je m'en sors avec sIFR pour le type d'affichage (titres, titres de billets de blog, etc.) et l'utilisation de l'une des polices web-safe les moins usées pour le corps type (comme Trebuchet MS). Si vous êtes ennuyé avec toutes les polices web-safe, vous définissez probablement le terme trop étroitement-regarder cette matrice de polices de stock ce navire avec des os majeurs et des chances sont que vous serez en mesure de trouver une cascade de police qui va attraper presque tous les utilisateurs du web.
par exemple: font-family: "Lucida Grande", "Verdana", sans-serif est une cascade de police commune; OS X vient avec Lucida Grande, mais ceux avec Windows obtiendront Verdana, une police web-safe avec des lettres de taille similaire et shape à Lucida Grande. Les utilisateurs de Linux auront aussi Verdana s'ils ont installé le paquet de polices web-safe qui existe dans la plupart des gestionnaires de paquets de distros, ou bien ils retomberont sur un sans-serif ordinaire.
et c'est peu probable aussi -- EOT est un format assez restrictif qui n'est supporté que par IE. Safari 3.1 et Firefox 3.1 (bien l'alpha actuel) et peut-être Opera 9.6 prennent en charge l'intégration des polices de type vrai (ttf), et au moins Safari prend en charge les polices SVG par le même mécanisme. Une liste à part a eu une bonne discussion à ce sujet un certain temps retour .
Check out Typekit , une option commerciale (ils ont un paquet gratuit disponible aussi).
il utilise différentes techniques selon le navigateur utilisé ( @font-face vs. EOT format), et ils prennent soin de toutes les questions de licence de police pour vous aussi. Il supporte tout jusqu'à IE6.
voici plus d'informations sur le fonctionnement de Typekit:
j'ai demandé ce un peu en arrière . La réponse est fondamentalement que cela ne fonctionne pas. : (