83 votes

Comment incorporer des polices en HTML?

J'essaye de trouver une solution convenable (surtout à partir de la SEO) pour l'incorporation des polices dans les pages web. Pour l'instant j'ai vu le W3C solution, qui ne fonctionne même pas sur Firefox, et ce assez cool solution. La deuxième solution est pour les titres. Est-il une solution disponible pour la totalité du texte? Je suis fatigué de polices standard pour les pages web.

Merci!

139voto

fencepost Points 1389

Les choses ont changé depuis que cette question a été initialement posées et répondues. Il y a eu une grande quantité de travail effectué sur l'obtention de la croix-navigateur incorporation de police du corps de texte de travail à l'aide de @font-face de leur incorporation.

Paul Irish mettre ensemble à l'épreuve des Balles @font-face syntaxe combinant les tentatives de plusieurs autres personnes. Si vous allez par le biais de l'ensemble de l'article (et pas seulement le haut), il permet à un seul @font-face déclaration pour couvrir IE, Firefox, Safari, Opera, Chrome et éventuellement d'autres. En gros, cela peut se nourrir hors de la FTO, EOT, SVG et WOFF dans les moyens qui ne cassez rien.

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

Travail à partir de cette base, de la Police de l'Écureuil de mettre ensemble une variété d'outils utiles, y compris le @font-face Generator qui vous permet de charger une TTF ou OTF fichier et obtenir l'auto-conversion de fichiers de polices de caractères pour les autres types, avec les pré-construit CSS et une démo de la page HTML. Police Écureuil a également des Centaines de @font-face kits.

Soma Conception de aussi organiser le FontFriend Bookmarklet, qui redéfinit les polices sur une page à la volée, de sorte que vous pouvez essayer des choses. Il comprend glisser-déposer @font-face support de FireFox 3.6+.

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

Restrictions De La Licence

Enfin, WebFonts.info a mis sur pied une belle wiki avais la liste des Polices disponibles pour le @font-face intégration basée sur les licences. Il n'a pas la prétention d'être une liste exhaustive, mais les polices devraient être disponibles (éventuellement avec des conditions telles que l'attribution dans le fichier CSS) pour l'incorporation/de la liaison. Il est important de lire les licences, car il y a certaines limites qui ne sont pas poussés en avant, évidemment, sur la police des téléchargements.

9voto

Martin Meixger Points 914

Essayez Typeface.js , vous convertissez votre police .TTF en 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.

6voto

savetheclocktower Points 1088

Non, il n'y a pas une solution convenable pour le type de corps, à moins que vous êtes prêt à répondre à ceux ayant le saignement-bord des navigateurs.

Microsoft a de TRAME, de leur propre police d'intégration de la technologie, mais je n'ai pas entendu parlé depuis des années, et je ne connais personne qui l'utilise.

Je me débrouille avec sIFR pour le type d'affichage (titres, les titres d'articles de blog, etc.) et à l'aide de l'une des moins usés polices web pour type de corps (comme Trebuchet MS). Si vous vous ennuyez avec toutes les polices web, vous êtes probablement dans la définition du terme de manière trop étroite - regardez cette matrice de stock polices fournies avec les principaux Systèmes d'exploitation et les chances sont que vous serez en mesure de trouver une police cascade qui va attraper à peu près tous les utilisateurs du web.

Par exemple: font-family: "Lucida Grande", "Verdana", sans-serif est une commune de la police cascade; OS X est livré avec Lucida Grande", mais ceux avec Windows obtiendrez Verdana, une web-sécurité de la police avec des lettres de la même taille et de la forme Lucida Grande. Les utilisateurs de Linux pourront également obtenir Verdana si ils ont installé les polices web package qui existe dans la plupart des distributions' les gestionnaires de paquets, sinon ils tomberont ordinaire sans-serif.

4voto

olliej Points 16255

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 vrai (ttf), et au moins Safari prend en charge les polices SVG via le même mécanisme. Une liste a part une bonne discussion à ce sujet un certain temps en arrière .

3voto

philfreo Points 12382

Découvrez Typekit, une option commerciale (ils ont un forfait gratuit est aussi disponible).

Il utilise des techniques différentes selon le navigateur utilisé (@font-face vs EOT format), et ils prennent soin de toutes les licences de polices questions pour vous aussi. Il prend en charge tout le bas de IE6.

Voici quelques infos sur comment Typekit œuvres:

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X