Avec les nouveaux navigateurs, les nouvelles normes et les nouvelles technologies on peut maintenant sereinement utiliser la propriété CSS @font-face et faire en sorte que ça marche sur tous les navigateurs ! Avec certes un ou deux hacks CSS, notamment pour IE6 et pour éviter que des fichiers soient chargés plus que nécessaires.

Voici par exemple, la technique utilisée et décrite par Paul Irish (qui travaille, entre autres, pour Google Chrome et fait partie de la JQuery team) dans son article « Bulletproof @font-face syntax » :

@font-face {
   font-family: 'Graublau Web';
   src: url('GraublauWeb.eot');
   src: local('☺'),
   url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Pour avoir des explications complètes, je te conseille fortement l’article présenté ci-dessus. On voit bien qu’il faut posséder la typo dans différents formats (eot, woff, ttf) pour que @font-face fonctionne partout.

Et c’est là qu’intervient le site FontSquirrel et son « @font-face generator kit ». A partir de l’upload d’une typo (j’ai testé avec une .ttf), il la convertit dans les formats qui nous intéressent, prépare une page de démo avec le CSS qui va bien et, enfin, propose de télécharger une archive de tout ça ! J’ai fait le test avec un typo que j’avais et tu peux voir le fichier de démo de FontSquirrel.

Cela ouvre quand même de belles perspectives, tant que ça ne part pas dans tous les sens. J’ai d’ailleurs décidé d’utiliser cette technique pour le prochaine re-design du blog (coming soon).

Pas encore de billet sur le même sujet !

Tutorial pour JQuery vu ce matin sur le blog sohtanaka.com. Le tutorial propose une manière de créer des colonnes « intelligents » avec JQuery & CSS.

Le CSS permet ici de gérer l’affichage des colonnes par défaut, de définir leur taille, les marges entre les colonnes… Et le JQuery permet de répartir les colonnes s’il reste de l’espace sur le côté, de gérer dynamiquement l’affichage (si la taille de la fenêtre est modifiée).

Tout le code nécessaire est donné dans le tutorial. Il peut permettre un bon gain de temps, plus besoin de calculer la taille au pixel entre les colonnes, les marges, les paddings et le conteneur !

Pas encore de billet sur le même sujet !