@font-face: Utilisation

download
Salut,

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>
et de ce fichier CSS:
h1{color: blue; font-family: arial, serif;}
Maintenant, au début du css, je vais rajouter la propriété font-face, je ne vous explique pas le code, il est simple et suffisamment commenté :
@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
ça nous donne donc à la fin, un fichier css comme ça :
@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;}
Le plugin permettant d'afficher le code à quelques problèmes à parser le code que je lui envoie, la propriété "url" de @font-face est donc comme cela: url( "segoepr.ttf" ) ; . Merci de votre compréhension.
Et voilà, vous avez appris à utiliser @font-face, à savoir, aussi,vous pouvez rajouter les propriétés suivantes dans le @font-face :
  • 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]

Ce contenu a été publié dans Codage, Ressources. Vous pouvez le mettre en favoris avec ce permalien.

2 réponses à @font-face: Utilisation

  1. Stéphane dit :

    Un site génial, vraiment utile très complémentaire de ton tuto :
    http://www.fontsquirrel.com/fontface/generator

    Il permet de mass-convertir des polices dans tous les formats et de générer le CSS qui va bien. A utiliser absolument !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>