Articles mot-clétés sprites
Utiliser font-face pour des images ?
18 juin 2010 3 commentaires — font-face, html, images, performances, sprites, unicode, web
Depuis que @font-face est utilisable partout, on a envie de pousser les limites de son utilisation. Utiliser des générateurs automatiques, créée des police d’écritures qui ne transforment que le caractère &, etc.
Dans l’article ever- thought about using font face for icons? ils expliquent comment faire une page où toutes les images seraient contenues dans un fichier de police. En appliquant chaque icône à une lettre, on a des images dans la police d’écriture
Cela donne des images :
- qui s’agrandissent sans perte de qualité ;
- très faciles à colorer, agrandir, souligner en CSS ;
- rapides à charger car cela ne fait qu’une requête HTTP pour tout le paquet d’icônes.
Mais cette technique souffre de serieux points faibles. En plus d’être plus difficile à maintenir, il faut choisir entre un HTML qui n’a aucun sens comme <span class="phone-icon">a</span> ou une feuille de style CSS imbitable qui ne fonctionne pas sous IE :
.phone-number:before {
content: 'a';
font-family: "Mes Icônes"
}La solution serait de ne remplacer que les quelques caractères Unicode qui représentent déjà des icônes. Ainsi on garde du sens à l’HTML et on peut profiter de la cascade des polices d’écriture disponibles.
