Comment incorporer des polices en HTML?

Question

J'essaie de trouver une solution décente (en particulier du côté du référencement) pour incorporer des polices dans des pages Web. Jusqu'à présent, j'ai vu La solution W3C , qui ne fonctionne même pas sous Firefox, et cette solution plutôt cool . La deuxième solution concerne uniquement les titres. Existe-t-il une solution pour le texte intégral? J'en ai assez des polices standard pour les pages Web.

Merci!

Answer 1

Les choses ont changé depuis que cette question a été posée et répondue. Beaucoup de travail a été fait pour obtenir l'incorporation de polices entre plusieurs navigateurs afin que le corps du texte fonctionne avec l'incorporation de @ font-face.

Paul Irish a mis en place la syntaxe Bulletproof @ font-face en combinant tentatives de plusieurs autres personnes. Si vous parcourez l’ensemble de l’article (et pas seulement le haut), il permet une seule déclaration @ font-face pour couvrir IE, Firefox, Safari, Opera, Chrome et éventuellement d’autres. Fondamentalement, cela peut alimenter OTF, EOT, SVG et WOFF de manière à ne rien casser.

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");
}

À partir de cette base, Font Squirrel a mis au point divers outils utiles, notamment le Générateur @ font-face qui vous permet de télécharger un fichier TTF ou OTF et d'obtenir automatiquement fichiers de polices convertis pour les autres types, avec CSS préconstruit et une page HTML de démonstration. Font Squirrel possède également des centaines de kits @ font-face .

Soma Design a également créé le BookmarkFriend Bookmarklet , qui redéfinit les polices sur une page à la volée afin de vous pouvez essayer des choses. Il inclut la prise en charge de glisser-déposer @ font-face dans FireFox 3.6 +.

Plus récemment, Google a commencé à fournir les polices Web Google , un assortiment de polices disponibles sous Licence Open Source et servi depuis les serveurs de Google.

Restrictions de licence

Enfin, WebFonts.info a créé une belle liste de wiki Polices disponibles pour l'intégration de @ font-face sur la base de licences. Il ne prétend pas être une liste exhaustive, mais des polices doivent être disponibles (éventuellement assorties de conditions telles qu'une attribution dans le fichier CSS) pour l'intégration / la liaison. Il est important de lire les licences , car certaines limitations ne sont évidemment pas appliquées aux téléchargements de polices.

Answer 2

Essayez Facetype.js , vous convertissez votre fichier. TTF dans un fichier Javascript. Compatible avec le référencement complet, prend en charge FF, IE6 et Safari et se dégrade gracieusement sur les autres navigateurs.

Answer 3

Non, il n'y a pas de solution décente pour le type de corps, à moins que vous ne vouliez vous occuper que des navigateurs à la pointe de la technologie.

Microsoft a WEFT , leur propre technologie d’incorporation de polices, mais je ne l’ai pas encore. entendu parler il parle depuis des années, et je ne connais personne qui l'utilise.

Je me débrouille avec sIFR pour le type d'affichage (titres, titres des articles de blog, etc.) et pour l'utilisation d'une des polices Web moins usées pour le type de corps (comme Trebuchet MS). Si vous vous ennuyez avec toutes les polices Web sécurisées, vous définissez probablement le terme de façon trop étroite & # 8212; & nbsp; regardez cette matrice de polices de base livrées avec les principaux systèmes d’exploitation et vous aurez sans doute la possibilité de trouver une cascade de polices. qui attrapera presque tous les utilisateurs Web.

Par exemple: famille de polices: "Lucida Grande", "Verdana", sans-serif est une cascade courante de polices; OS X est livré avec Lucida Grande, mais ceux qui utilisent Windows auront Verdana, une police Web sécurisée avec des lettres de taille et de forme similaires à Lucida Grande. Les utilisateurs de Linux obtiendront également Verdana s’ils ont installé le paquet de polices Web sécurisé existant dans les gestionnaires de paquets de la plupart des distributions, ou alors ils retomberont dans un sans-serif ordinaire.

Answer 4

Et c’est aussi peu probable - EOT est un format assez restrictif, supporté uniquement par IE. Safari 3.1 et Firefox 3.1 (ainsi que l'alpha actuel) et éventuellement Opera 9.6 prennent en charge l'intégration de 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 il y a quelques temps, retour .

Answer 5

Découvrez Typekit , une option commerciale (un package gratuit est également disponible).

Il utilise différentes techniques en fonction du navigateur utilisé (format @ font-face ou EOT ) et prend en charge tous les problèmes de licence de polices. toi aussi. Il supporte tout jusqu'à IE6.

Voici quelques informations supplémentaires sur le fonctionnement de Typekit:

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http: // www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

Answer 6

J'ai posé cette question à il y a quelque temps . La réponse est fondamentalement que cela ne fonctionne pas. : (