Forcer une police que l'user n'a pas ? CSS 3 ?

[1-sponsor]

Bonjour à tous,

Désolé pour cette bête question, mais ça fait un moment que je ne trouve plus le temps pour m'informer des nouvelles technologies type CSS3 et HTML5...

Il me semble avoir entendu parler d'une technique (en CSS3??) permettant de forcer (sur les navigateurs modernes) une police d'écriture que l'utilisateur n'a pas sur son PC/MAC.... Je me trompes ? Quelqu'un aurait un lien SVP ?

Merci d'avance !

[fredfan]

@font-face, ce n'est pas vraiment du css3, c'est plutôt un truc bâtard apparu dans le css2
Le plus simple c'est de faire un kit toi-même ici : http://www.fontsquirrel.com/fontface/generator
et après c'est une simple affaire de copier-coller

[spout]

+1000 pour le @font-face et FontSquirrel

Il y a aussi des kits tout fait: http://www.fontsquirrel.com/fontface

Un peu de lecture:
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

[1-sponsor]

Génial les gars !

Je pose ma bête question et en 20 minutes, je vais déjà aller me coucher moins c*

1000 mercis fredfan & spout ... je penses avoir tout ce qu'il me faut

[spout]

Google a même sorti une API:
http://code.google.com/apis/webfonts/docs/getting_started.html

[SpeedAirMan]

Google a en effet sorti une API et qq polices gratuites et hébergées sur leurs propres serveur ! (donc rapide à charger à priori)

@font-face fonctionne même sur d'anciens navigateurs tels que IE6 (oui oui Môsieur !) - grâce à un fallback JavaScript si je ne me trompe pas.

Ce que je regrette avec @font-face : c'est que les polices ne sont pas "lissées", donc pas toujours... disons... parfaites.

Pour ça il existe une autre technique : Cùfon (JavaScript).

Dans l'un ou l'autre cas, il ne faut pas oublier que ces techniques nécessitent + de ressources : téléchargement du script + de la police, puis chargement (affichage / rendering). Il faut donc toujours se poser la question : est-ce vraiment nécessaire ? Il y'a parfois des "font stacks" qui sont très bien et fonctionnent sur la majorité des navigateurs (font-stacks = ensemble de polices, pour faire simple). L'avantage des font stacks c'est que ça ne charge pas de police/fonts, mais fait appel au contraire aux polices existantes sur la machine du visiteur.


Edit : ne pas oublier de prendre en compte l'aspect "lisible" d'une police

[1-sponsor]

même sur d'anciens navigateurs tels que IE6 (oui oui Môsieur !)

OMG !

Bonne info.

En fait, c'est juste pour faire un logo en entête des page...

Car une "image", avec le Zoom "CTRL + [ + ]" qui se démocratise, ça pixelise. De

plus, j'aime pas le flash... donc la soluce est de bosser des logos en écritures réelles...

Sauf qu'on a pas beaucoup de belles polices compatibles web avec les techniques classiques.
Si ça fonctionne avec IE6 en+, c'est le pied !

Encore merci.

[fredfan]

En fait le @font-face eest apparu sur ie6 à l'origine si je me souviens bien. Mais comme il fallait passer par le brevet Microsoft personne d'autre ne pouvait utiliser les polices eot
Prends les options expert de font-squirrel et vire toutes les lettres dont tu n'as pas besoin. Si tu utilises 5 ou 6 lettres ta police ne va pas peser lourd.
Le lissage est bon sur certaines polices et pas sur d'autres. On peut le repérer en faisant ctrl+ et ctrl- sur la prévisualisation.