| Description | Standard 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 web | www.w3.org/... | google.com/... | typekit.com | webink.com | kernest.com | github.com/... | neocracy.org | novemberborn.net/... | mawhorter.net | | wikipedia.org/... |
|---|
| Mise en place | facile | facile | facile | facile | facile | moyenne | moyenne | difficile | difficile | facile | facile |
|---|
| Dépendances | | service web externe | JavaScript, service web externe | service web externe | service web externe | JavaScript | JavaScript | JavaScript, Flash | PHP, 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 issue | nécessite d'avoir les droits de la police | Google diffuse seulement de police libre de droits | l'abonnement couvre le prix des licences
pour utiliser les font payantes | l'abonnement couvre le prix des licences pour utiliser les font
payantes servi par les serveurs de WebINK | l'abonnement couvre le prix des licences pour utiliser les font
payantes | nécessite d'avoir les droits de la police | nécessite d'avoir les droits de la police | l'inclusion de la police est parfois autorisé pour flash | non | non | |
|---|
| Autres liens | fontsquirrel.com/... | | | | | shoqolate.com/... | | sifrgenerator.com | | interactimage.com | flywebmaster.com/... |
|---|
| Fonctionnalités | | | | | | | | | | | |
|---|
| Texte sélectionnable | Oui | Oui | Oui | Oui | Oui | Non | Oui | Oui sélectionnable indépendamment du reste de la page | Non | Non | Oui |
|---|
| Accessible | Oui | Oui | Oui | Oui | Oui | | | Oui pas à 100% | | | Oui |
|---|
| Redimensionnable | Oui | Oui | Oui | Oui | Oui | Non la taille ne s'adapte pas après le chargement de la page | Non la taille ne s'adapte pas après le chargement de la page | Non | Non la taille ne s'adapte pas après le chargement de la page | Non | Oui |
|---|
| Chargement rapide | Oui | Oui | | | | Oui | Oui | Non | Non | Non | Oui |
|---|
| Compatibilité | | | | | | | | | | | |
|---|
| Internet Explorer | Oui 4+ (EOT, WOFF (IE9) fonts) | Oui see @font-face | Oui see @font-face | Oui IE 4+ (EOT, WOFF) | Oui see @font-face | Oui 6+ | Oui 6+ | Oui with flash | Oui | Oui | Oui |
|---|
| Firefox | Oui 3.5+ (TTF, OTF, WOFF (FF3.6) fonts) | Oui see @font-face | Oui see @font-face | Oui 3.5+ (TTF, WOFF) | Oui see @font-face | Oui 1.5+ | Oui 1.5+ | Oui with flash | Oui | Oui | Oui |
|---|
| Safari | Oui 3.1+ (TTF, OTF fonts) | Oui see @font-face | Oui see @font-face | Oui 3.1+ (TTF, WOFF) | Oui see @font-face | Oui 3+ | Oui 2+ | Oui with flash | Oui | Oui | Oui |
|---|
| Google Chrome | Oui 4+ (TTF, OTF fonts) | Oui see @font-face | Oui see @font-face | Oui 3.5+ (TTF, WOFF) | Oui see @font-face | Oui 1.0+ | | Oui with flash | Oui | Oui | Oui |
|---|
| Opera | Oui 10+ (TTF, OTF, SVG fonts) | Oui see @font-face | Oui see @font-face | Oui 10+ (TTF, WOFF) | Oui see @font-face | Oui 9.5+ | | Oui with flash | Oui | Oui | Oui |
|---|
| iPhone / iPad | Oui (SVG font) | Non | Oui | Oui 4.2+ (TTF) | Oui see @font-face | | | Non | Oui | Oui | Oui |
|---|
Avis utilisateurs et commentaires
What is the faster solution (page loading) ? Quelle solution la plus rapide sur le chargement de la page ?