Sunfox

Le journal de Sunny Ripert


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>

Articles probablement reliés

3 Commentaires

  1. 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. 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. 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 ?

Commenter


Vous pouvez avoir une jolie icône vous aussi en créant un gravatar.

Vous pouvez y saupoudrer de l'HTML5 avec les balises et suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>.


:D Sunny Ripert

est un développeur web vivant à Paris.

CV, me contacter


Textes et contenus sous licence Creative Commons.
Site crée par mes soins et propulsé par WordPress.