Comparatif des solutions de gestion des polices de caractères sur le web

Entreprises > Webmaster
4
2012-01-23 09:06:16

Lorsqu'on crée une site ou une page web, on a souvent, ou notre client, envie d'utiliser autre chose que les polices de caractères par défaut. Il existe plusieurs alternatives avec leurs inconvénients. Lisez le tableau comparatif ci-dessous pour faire le choix qui vous convient le mieux.

Principaux aspects à inspecter

Compatibilité

Si vous avez besoin que votre site web est un bon rendu sur la plupart des navigateurs (sur les iPad, les plateformes mobiles ou les vielles versions de navigateurs), il faudra regarder en détails la section compatibilité.

Flash de texte non stylé (FOUT)

Pendant un court instant la page affiche la police de caractère par défaut du navigateur, avant de se rafraîchir avec la font de votre choix. Pour éviter ce comportement désagréable vous devez choisir une solution qui se "charge rapidement"

Comparatif relatif: http://socialcompare.com/fr/comparison/browser-fonts-support-comparison
@font-faceGoogle Font APITypeKitWebINKKernestCufóntypeface.jssIFRFLIRImages replacementWeb-safe fonts
DescriptionStandard CSS qui permet de définir des police de caractères non standard.Librairie CSS avec une API Javascript optionnel qui permet de servir des polices de caractères.
La technologie utilisé est @font-face mais Google permet de simplifier son accès et s'assure que la licence de la police de caractère est compatible pour une utilisation sur un site web. La police est servi par les serveurs de Google.
L'API Javascript permet de contrôler la manière dont la police doit être chargé et permet de s'intégrer avec les polices TypeKit.
Service permettant d'utiliser un ensemble de polices payantes ou libre de droit. Les polices de caractères sont servis par leur serveurs.
Ce service est similaire à Google Font API (basé sur @font-face), mais ce service permet d'utiliser plus de police moyennant un abonnement.
Service permettant de choisir parmi des milliers de police. Similaire à Typekit mais utilise uniquement CSS pas de JavaScript.Similaire à Google Font API. Ce service utilise la technologie @font-face. Les polices de caractères sont hébergés sur leur serveurs.Librairie javascript qui parcours le texte pour le remplacer par des dessins dans un canvas / VML.Librairie javascript qui parcours le texte pour le remplacer par des dessins dans un canvas / VML.Librairie javascript qui parcours le texte de la page web, pour le remplacer par un composant Adobe Flash.Librairie javascript qui parcours le texte pour le remplacer par des images générées par un script PHP.Utilisation d'un éditeur d'image pour créer des images avec du texte.Utilisation d'une liste de police de caractères qui est généralement présent dans la plupart des environnements (OS/navigateurs)
Site webhttp://www.w3.org/TR/css3-fonts/#the-font-face-rulehttp://code.google.com/apis/webfonts/http://typekit.com/http://www.webink.comhttp://kernest.com/http://wiki.github.com/sorccu/cufon/abouthttp://typeface.neocracy.org/http://wiki.novemberborn.net/sifr3/http://facelift.mawhorter.net/http://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts
Mise en placefacilefacilefacilefacilefacilemoyennemoyennedifficiledifficilefacilefacile
Dépendancesservice web externeJavaScript, service web externeservice web externeservice web externeJavaScriptJavaScriptJavaScript, FlashPHP, JavaScript
Avantages+ l'accessibilité est conservé
+ supporte unicode
+ supporte toutes les variations de style sur la police
+ la police est servis par Google ce qui permet de décharger votre serveur et si le service est beaucoup utilise la font peut déjà être dans le cache du navigateur ce qui accélère encore le rendu
+ l'accessibilité est conservé
+ supporte toutes les variations de style sur la police
+ large sélection de police
+ les polices sont servi par les serveurs de typekit
+ large sélection de police professionnelles
+ police servi par des serveurs sur Amazon Cloudfront
+ large sélection de police
+ les polices sont servi par les serveurs de kernest
+ le rendu est homogène à travers tous les navigateurs
+ on peut sélectionner les caractères à inclure dans le fichier de police généré pour rendre le fichier plus léger
+ les variations de style de police sont harmonises à travers les différents navigateurs. (text-shadow...)
+ le rendu est homogène à travers tous les navigateurs+ compatible avec tous les navigateurs graphiques+ compatible avec tous les navigateurs graphiques
+ pas de limitations typographique
+ léger (rien de plus à télécharger)
Inconvénients- il n'y a pas un seul format de fichier commun pour assurer la compatibilité de partout- nombre de police limité
- ensemble de caractère de la font limité
- paiement annuel- paiement mensuel- sélection du texte impossible
- à cause de la performance, cette technique est approprié surtout pour les titres, menus...
- certains effets nécessite des adaptations (text-decoration, :hover...).
- sélection du texte impossible- nécessite flash
- lent à afficher
- problèmes avec flash/adblocker
- sélection du texte impossible
- consommation de bande passante importante
- nécessite PHP/GD coté serveur
- sélection du texte impossible
- nécessite de créer une nouvelle image pour chaque texte.
- bandwith consuming
- nombre de police limité
Font licensing issuenécessite d'avoir les droits de la policeGoogle diffuse seulement de police libre de droitsl'abonnement couvre le prix des licences pour utiliser les font payantesl'abonnement couvre le prix des licences pour utiliser les font payantes servi par les serveurs de WebINKl'abonnement couvre le prix des licences pour utiliser les font payantesnécessite d'avoir les droits de la policenécessite d'avoir les droits de la policel'inclusion de la police est parfois autorisé pour flashnonnon
Autres lienshttp://www.fontsquirrel.com/fontfacehttp://cufon.shoqolate.com/generate/http://www.sifrgenerator.com/http://www.interactimage.com/http://www.flywebmaster.com/webdesign/tips/compatibility.php
Fonctionnalités
Texte sélectionnableOuiOuiOuiOuiOuiNonOuiOui sélectionnable indépendamment du reste de la pageNonNonOui
AccessibleOuiOuiOuiOuiOuiOui pas à 100%Oui
RedimensionnableOuiOuiOuiOuiOuiNon la taille ne s'adapte pas après le chargement de la pageNon la taille ne s'adapte pas après le chargement de la pageNonNon la taille ne s'adapte pas après le chargement de la pageNonOui
Chargement rapideOuiOuiOuiOuiNonNonNonOui
Compatibilité
Internet ExplorerOui 4+ (EOT, WOFF (IE9) fonts)Oui see @font-faceOui see @font-faceOui IE 4+ (EOT, WOFF)Oui see @font-faceOui 6+Oui 6+Oui with flashOuiOuiOui
FirefoxOui 3.5+ (TTF, OTF, WOFF (FF3.6) fonts)Oui see @font-faceOui see @font-faceOui 3.5+ (TTF, WOFF)Oui see @font-faceOui 1.5+Oui 1.5+Oui with flashOuiOuiOui
SafariOui 3.1+ (TTF, OTF fonts)Oui see @font-faceOui see @font-faceOui 3.1+ (TTF, WOFF)Oui see @font-faceOui 3+Oui 2+Oui with flashOuiOuiOui
Google ChromeOui 4+ (TTF, OTF fonts)Oui see @font-faceOui see @font-faceOui 3.5+ (TTF, WOFF)Oui see @font-faceOui 1.0+Oui with flashOuiOuiOui
OperaOui 10+ (TTF, OTF, SVG fonts)Oui see @font-faceOui see @font-faceOui 10+ (TTF, WOFF)Oui see @font-faceOui 9.5+Oui with flashOuiOuiOui
iPhone / iPadOui (SVG font)NonOuiOui 4.2+ (TTF)Oui see @font-faceNonOuiOuiOui
Autre
J'aime 1 1 0 1 0 0 0 0 0 0 0
Mis à jour2011-05-24 21:23:332011-05-24 22:28:142011-05-24 22:28:142012-01-23 09:06:162011-05-24 22:28:142011-05-24 22:28:142011-05-24 22:28:142011-05-24 22:28:142011-05-24 22:28:142011-05-24 21:23:332011-05-24 22:15:05
Inclure
  • 2010-05-24 01:23:59
    2012-01-23 09:06:16
  • Webmaster
    English
  • Compare les solutions de web font: @font-face vs sIFR vs typeface.js vs Cufon...
  • Publique
    Publique
  • Creative Commons License CC-BY-SA 3.0 / GNU FDL
    Gérer les sauvegardes

Commentaires

  • What is the faster solution (page loading) ? Quelle solution la plus rapide sur le chargement de la page ?
    Posté 2013-10-12 13:15:58 par madvic
  • a voté pour Google Font API (J'aime)
    Posté 2012-01-23 09:15:05 par Alexis
  • a voté pour WebINK (J'aime)
    Posté 2012-01-23 05:01:58 par bdunzer
  • a voté pour ce Comparatif (J'aime)
    Posté 2011-05-02 09:27:00 par Seralive
  • a voté pour ce Comparatif (J'aime)
    Posté 2011-01-19 05:12:40 par Romain Sandri
  • a voté pour ce Comparatif (J'aime)
    Posté 2010-06-11 03:29:05 par Mathias
  • a voté pour @font-face (J'aime)
    For now it's still complex to make it compatible with most browsers, but it's a promising solution.
    English Posté 2010-05-28 02:28:02 par Alexis
  • a voté pour ce Comparatif (J'aime)
    Posté 2010-05-24 02:54:24 par Alexis

Laisser un commentaire

Créer des tableaux comparatifs ou listes sur tout !

C'est gratuit et rapide de créer des tableaux originaux

Créer un tableau