Je tiens d'abord à m'excuser de ne pas avoir fait d'articles pendant ces 2-3 semaines : pas d'envies, pas d'idées etc... Mais je reviens avec un mini-tuto pour vous montrer l'utilisation de @font-face. Cette propriété CSS sert à pouvoir charger une police non-standard pour l'utiliser sur votre site web.
Exemple de polices standard: Arial, serif.
Exemple de polices non-standard: segoe, N-Gage etc...
Note: Ne marche que sur des navigateurs récents, sinon, préférez Cufon, qui utilise le JavaScript
Mon but, c'est donc de pouvoir utiliser une police non-standard, ici je vais utiliser segoe, pour pouvoir styliser tout mes h1.
Je pars de ce document html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>@font-face</title> <link rel="stylesheet" href="style/style.css" title="style" type="text/css" /> </head> <body> <div><h1>Article 1</h1></div> <div><p>Le premier article</p></div> <div><h1>Article 2</h1></div> <div><p>Le second article</p></div> <div></body></div> <div></html></div> <div>
h1{color: blue; font-family: arial, serif;}
@font-face {
font-family: "segoe"; /*On appelera la police grâce à ce nom*/
src: /* Se reporter à la fin du tuto. Le lien du fichier TTF*/
}
Note : Les fichiers de font doivent être en .ttf
@font-face {
font-family: "segoe" ; /*On appelera la police grâce à ce nom*/
src: /* Se reporter à la fin du tuto .Le lien du fichier TTF*/
}
h1{color: blue; font-family: segoe, arial, serif;}
- font-weight
- font-style
- etc..
A bientôt :)
[edit]
Dans les commentaires, Stéphane de etsionparlait et mangetamain(que je vous conseille de lire, très beau blog !) m'à fait découvrir un outil sympa: http://www.fontsquirrel.com/fontface/generator , vraiment bien foutu, gain de temps assuré !
[/edit]