web-dev-qa-db-fra.com

Comment incorporer des polices en HTML?

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'ici, j'ai vu la solution du 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!

javascripthtmlflashfontsembed
77
Dan Rosenstark

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 syntaxe Bulletproof @ font-face combinant les 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 de couvrir IE, Firefox, Safari, Opera, Chrome et éventuellement d’autres). distribuez 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");
}

En travaillant à partir de cette base, Font Squirrel a rassemblé une variété d’outils utiles, y compris le générateur de @ font-face qui vous permet de télécharger un fichier TTF ou OTF et d’obtenir des fichiers de police convertis automatiquement pour les autres types, ainsi que des CSS préconstruites et une page HTML de démonstration. Font Squirrel a également 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 quelque chose. Il inclut la prise en charge de 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 une licence Open Source et servies à partir des serveurs de Google.

Restrictions de licence

Enfin, WebFonts.info a créé une liste Nice wiki'd de Polices disponibles pour l’incorporation 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 pas forcément mises en avant sur les téléchargements de polices.

131
fencepost

Essayez Facetype.js , vous convertissez votre police .TTF en un fichier Javascript. Compatibilité SEO totale, prend en charge FF, IE6 et Safari et se dégrade gracieusement sur d’autres navigateurs.

9
Martin Meixger

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 qui saignent.

Microsoft possède TRAME , sa propre technologie d’incorporation de polices, mais je n’en ai pas entendu parler 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 manière trop étroite - regardez cette matrice de polices de stock livrée avec les principaux systèmes d'exploitation et vous aurez des chances de pouvoir le faire. pour trouver une cascade de polices qui attrapera presque tous les utilisateurs Web.

Par exemple: font-family: "Lucida Grande", "Verdana", sans-serif est une cascade de polices courante; 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.

6
savetheclocktower

Et il est peu probable aussi - 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 true (ttf)), et au moins Safari prend en charge les polices SVG selon le même mécanisme. une bonne discussion à ce sujet depuis un moment retour .

4
olliej

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

Il utilise différentes techniques selon le navigateur utilisé (@font-face vs EOT format), et ils s’occupent également de tous les problèmes de licences de polices. Il supporte tout jusqu'à IE6.

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

3
philfreo

J'ai demandé ceci il y a quelque temps . La réponse est fondamentalement que cela ne fonctionne pas. :(

2
Marcus Downing