I. Introduction▲
Cette fonction avait été introduite dans la version CSS2, puis supprimée dans la version CSS2.1, et elle est de nouveau de retour dans la version CSS3.
Il est possible d'utiliser une image pour afficher correctement le texte dans tous les navigateurs, par contre ce texte ne peut être référencé et sélectionné. La propriété @font-face permet de pallier ce « manque ».
Attention, l'ajout de polices personnalisées peut ralentir le chargement de la page.
Mais avant toute chose, il faut que la police vous appartienne ou que l'auteur donne l'autorisation de l'utiliser.
II. La syntaxe▲
La syntaxe est toute simple, elle permet de couvrir tous les navigateurs qui peuvent utiliser cette propriété :
@font-face
{
font-family:
'PolicePerso'
;
src:
url(
'PolicePerso.eot'
)
;
src:
url(
'PolicePerso.eot?#iefix'
)
format(
'embedded-opentype'
),
url(
'PolicePerso.woff'
)
format(
'woff'
),
url(
'PolicePerso.otf'
)
format(
'otf'
),
url(
'PolicePerso.ttf'
)
format(
'truetype'
),
url(
'PolicePerso.svg#PolicePerso'
)
format(
'svg'
);
}
Ça y est je suis perdu, je ne comprends plus rien !
Quelques explications sur la syntaxe :
EOT - Embedded OpenType font
url(
'PolicePerso.eot'
)
/* Pour IE9 et + */
url(
'PolicePerso.eot?#iefix'
)
format(
'embedded-opentype'
)
/* Pour IE6-IE8 */
WOFF - Web Open Font Format
url(
'PolicePerso.woff'
)
format(
'woff'
)
/* Pour les navigateurs modernes */
TTF/OTF - TrueType and OpenType font support
url(
'PolicePerso.otf'
)
format(
'otf'
)
/* Safari, iOS, Mobile */
url(
'PolicePerso.ttf'
)
format(
'truetype'
)
/* Firefox, Safari, iOS, Mobile */
SVG fonts
url(
'PolicePerso.svg#PolicePerso'
)
format(
'svg'
)
/* iOS, Mobile */
Compatibilité des différents navigateurs :
À partir de... | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | BlackBerry Browser | Opera Mobile | Chrome for Android | Firefox for Android |
EOT | 6.0 | ||||||||||
WOFF | 9.0 | 3.6 | 5.0 | 5.1 | 11.1 | 5.0 | 7.0 | 11.0 | 18.0 | 15.0 | |
SVG | 4.0 | 3.2 | 9.0 | 3.2 | 3.0 | 7.0 | 10.0 | 18.0 | |||
TTF/OTF | 3.5 | 4.0 | 3.1 | 10.0 | 4.2 | 2.2 | 7.0 | 10.0 | 18.0 | 15.0 |
III. Exemple▲
Maintenant passons au premier exemple.
III-A. La police▲
Dans notre cas nous allons prendre la police « sansation » (qui est une police gratuite et que l'on peut utiliser dans notre cas).
Mais nous n'avons généralement que le fichier tff, il faut donc créer les autres fichiers.
FontSquirrel est un site qui propose des polices gratuites pour un usage commercial. Mais il possède aussi un générateur pour @font-face, c'est cet outil qui va nous servir.
Vous arrivez sur la page suivante :
Maintenant, il faut fournir le fichier tff, il suffit de cliquer sur « Add Fonts » et d'aller chercher le fichier tff :
La police est chargée :
Pour obtenir tous les fichiers nécessaires, il faut choisir le mode expert :
Il faut maintenant cocher la case « SVG »:
Il existe d'autres fonctions sur la page que je vous laisse découvrir.
Dans les « Options avancées », vous pouvez enlever le « Suffix », cela fera des noms de fichiers plus courts :
Récupérons maintenant le fichier, il faut pour cela cocher « Yes, the fonts... » qui dit que la police est légalement admissible à l'intégration Web, et ensuite cliquer sur « Download Your Kit » :
Vous obtenez un fichier ZIP de la forme « webfontkit-20121010-043939.zip », et ce dernier contient les fichiers suivants :
Les fichiers EOT, SVG, TTF et WOFF y sont présents.
III-B. La feuille de style▲
Dans le fichier ZIP présent, il y a le fichier « stylesheet.css » qui contient le code de la propriété @font-face :
@font-face
{
font-family:
'sansationregular'
;
src:
url(
'sansationregular.eot'
)
;
src:
url(
'sansationregular.eot?#iefix'
)
format(
'embedded-opentype'
),
url(
'sansationregular.woff'
)
format(
'woff'
),
url(
'sansationregular.ttf'
)
format(
'truetype'
),
url(
'sansationregular.svg#sansationregular'
)
format(
'svg'
);
font-weight:
normal
;
font-style:
normal
;
}
Que signifient les deux dernières lignes ?
La propriété @font-face permet de rajouter des polices personnalisées, mais il faut aussi décliner toutes les « versions » : Bold, Italic et Bold-Italic, et ces deux lignes servent à les définir. Par défaut les valeurs sont « normal ».
À chacun de voir, s'il a besoin ou pas de toutes les versions de la police.
Dans mon cas la feuille de style devient donc :
@font-face
{
font-family:
'sansation'
;
src:
url(
'sansationbold.eot'
)
;
src:
url(
'sansationbold.eot?#iefix'
)
format(
'embedded-opentype'
),
url(
'sansationbold.woff'
)
format(
'woff'
),
url(
'sansationbold.ttf'
)
format(
'truetype'
),
url(
'sansationbold.svg#sansationbold'
)
format(
'svg'
);
font-weight:
bold
;
font-style:
normal
;
}
@font-face
{
font-family:
'sansation'
;
src:
url(
'sansationitalic.eot'
)
;
src:
url(
'sansationitalic.eot?#iefix'
)
format(
'embedded-opentype'
),
url(
'sansationitalic.woff'
)
format(
'woff'
),
url(
'sansationitalic.ttf'
)
format(
'truetype'
),
url(
'sansationitalic.svg#sansationitalic'
)
format(
'svg'
);
font-weight:
normal
;
font-style:
italic
;
}
@font-face
{
font-family:
'sansation'
;
src:
url(
'sansationregular.eot'
)
;
src:
url(
'sansationregular.eot?#iefix'
)
format(
'embedded-opentype'
),
url(
'sansationregular.woff'
)
format(
'woff'
),
url(
'sansationregular.ttf'
)
format(
'truetype'
),
url(
'sansationregular.svg#sansationregular'
)
format(
'svg'
);
font-weight:
normal
;
font-style:
normal
;
}
@font-face
{
font-family:
'sansation'
;
src:
url(
'sansationbolditalic.eot'
)
;
src:
url(
'sansationbolditalic.eot?#iefix'
)
format(
'embedded-opentype'
),
url(
'sansationbolditalic.woff'
)
format(
'woff'
),
url(
'sansationbolditalic.ttf'
)
format(
'truetype'
),
url(
'sansationbolditalic.svg#sansationbold_italic'
)
format(
'svg'
);
font-weight:
bold
;
font-style:
italic
;
}
Voici un exemple si l'on utilise toutes les versions ou juste la police Regular :
Avec les différentes versions | Avec juste SansationRegular |
Vous constatez bien qu'il y a une différence. L'affichage est plus joli avec toutes les versions.
III-C. La page HTML▲
Pour appeler la police, il suffit de rajouter dans la feuille de styles les lignes suivantes :
body {
font-family:
'sansation'
;
}
Et le fichier HTML devient :
<!
DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<head>
<meta http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<link rel
=
"stylesheet"
href
=
"styles.css"
type
=
"text/css"
charset
=
"utf-8"
/>
</head>
<body>
<p>Ligne 1</p>
<p><strong>Ligne 2</strong></p>
<p><em>Ligne 3</em></p>
<p><strong><em>Ligne 4</em></strong></p>
</body>
</html>
IV. Compléments▲
IV-A. Police en ligne▲
Nous avons vu qu'il faut indiquer où se trouve le fichier de la police, mais le lien peut aussi pointer sur un fichier d'un autre site :
src:
url(
'sansationregular.eot'
)
ou
src:
url(
http:
//monautresite/sansationregular.eot);
Il existe aussi des sites qui mettent des polices à disposition comme Google Web FontsGoogle Web Fonts ou Adobe Edge Web FontsAdobe Edge Web Fonts, mais il en existe d'autres.
Par exemple : prenons une police sur le site Google Web Fonts, il suffira alors d'ajouter dans votre page la commande suivante pour pouvoir ensuite l'utiliser :
<link
href=
'http://fonts.googleapis.com/css?family=Monda'
rel=
'stylesheet'
type=
'text/css'
>
IV-B. Mise en forme dans la feuille de style▲
Il est aussi possible de mettre en forme le texte dans la feuille de style, en rajoutant les lignes suivantes :
p.PolReg
{
font-weight:
normal
;
font-style:
normal
;
}
p.PolBold
{
font-weight:
bold
;
font-style:
normal
;
}
p.PolItalic
{
font-weight:
normal
;
font-style:
italic
;
}
p.PolDeux
{
font-weight:
bold
;
font-style:
italic
;
}
Et le fichier HTML deviendra :
<!
DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<head>
<meta http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<link rel
=
"stylesheet"
href
=
"styles.css"
type
=
"text/css"
charset
=
"utf-8"
/>
</head>
<body>
<p class
=
"PolReg"
>
Ligne 1</p>
<p class
=
"PolBold"
>
Ligne 2</p>
<p class
=
"PolItalic"
>
Ligne 3</p>
>
<p class
=
"PolDeux"
>
Ligne 4</p>
</body>
</html>
V. Les fichiers▲
Voici le fichier ZIP contenant les polices : Sansation.
Voici le fichier ZIP contenant l'exemple : HTML + CSS.
VI. Remerciements▲
Pour leurs remarques directes ou indirectes et conseils avisés : Torgar, FirePrawn, MuchosMuchos et jreaux62jreaux62.
Et pour la correction orthographique et syntaxique : ClaudeLELOUP.