Utiliser font-face pour des images ?

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>

1 Manuel :

Au fait, par curiosité, tu peux me rappeler les (références des) règles de la cascade des polices d’écriture disponibles ?

Juste pour comparer avec ce qui est fait actuellement en *TeX et voir s’il y a des bonnes idées à prendre (ce qui est probable, parce que les seuls traitements que je connais de ce genre de chose en *TeX sont assez rudimentaires à mes yeux).

2 sphax3d :

@Manuel : Quelques liens pour toi :
– http://articles.sitepoint.com/article/eight-definitive-font-stacks
– http://www.awayback.com/revised-font-stack/
– http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml
– http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
– http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

3 Sunny :

Lorsque l’on assigne une police en CSS on assigne en fait un font stack de polices de la forme font-face: Pentagon, Fbi, Gendarmerie, sherrif.

Et là où c’est intéressant c’est que la cascade se fait au niveau des caractères. Dans cet exemple si on a pas la police Pentagon ou que celle-ci n’a pas défini le caractère « ★ », cela passe à Fbi et ainsi de suite jusqu’à la police par défaut (les sherrif ont forcément des étoiles, c’est bien connu).

C’est équivalent en *TeX ?

Sunfox

Utiliser font-face pour des images ?

3 Commentaires

Sunny Ripert