Sunfox


Articles mot-clétés sprites

Utiliser font-face pour des images ?

18 juin 2010 3 commentaires, , , , , ,

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

Représentation de l'association de lettres de A-Z et a-z à des icônes

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.

<li> +33-666-42-42-50</li>

👨🏻‍🦰 Sunny Ripert

est un développeur web vivant à ParisContactArchives

Textes et contenus sous licence Creative Commons.