@font-fa©e !

12 novembre 2009 | graphisme, programmation | 2 commentaires

fontface

Voici la technique la plus facile pour choisir (enfin) une police en html, le @font-face !
Magique ?

/* Graublau Sans Web (www.fonts.info) */
@font-face {
font-family: Graublau Sans Web;
src: url(GraublauWeb.otf) format(« opentype »);
}
body {
font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

L’exemple vient de cette page (que je vous invite à lire) :
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Mais si on RTFM un peu :) et qu’on connait le monde de la typo (des bisounours ?), la magie a ses limites ; ici GraublauWeb.otf est distribué gratuitement et son auteur autorise l’encapsulage (embed) web, donc si vous voulez mettre une police commerciale comme l’helvetica Neue, c’est facile mais c’est pas bien !
Rapidement, avec les bases du html et css, n’importe qui peut télécharger le fichier de la typo.
Comme je suis sympa, voici l’exemple (piquer encore) à suivre pour utiliser l’helvetica neue si elle présente chez l’utilisateur (mais là, je ne vois plus l’intérêt du font-face !)

/* MgOpen Moderna */
/* http://www.zvr.gr/typo/mgopen/index */

@font-face {
font-family: MyHelvetica;
src: local(« Helvetica Neue »),
local(« HelveticaNeue »),
url(MgOpenModernaRegular.ttf);
}

@font-face {
font-family: MyHelvetica;
src: local(« Helvetica Neue Bold »),
local(« HelveticaNeue-Bold »),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}

body { font-family: MyHelvetica, sans-serif; }

On va terminer sur une note d’espoir avec des typos embedables légalement.
http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/
http://opentype.info/demo/webfontdemo.html

javascript dans ie

8 juillet 2008 | programmation | 0 commentaire

Pas facile de trouver les bugs javascript avec internet explorer !
Erreur ligne 128, dans un fichier qui regroupe cinq fichiers externes… c’est insignifiant.
Deux outils à votre secours : Script Debugger for Windows NT 4.0 and Later (scd10en.exe) ou sur le site de microsoft et en complément une debug barre pour ie !
Pour scd10en ^^ un réglage des outils/options internet pour sur cette image :

Article (english) en complément

blueprint css

25 août 2007 | graphisme, programmation | 1 commentaire

bp.png

Un projet intéressant sur la typographie, les grilles et les css ! http://code.google.com/p/blueprintcss/

td

27 juin 2007 | graphisme, programmation | 0 commentaire

vu chez jeanjean