CSS3 Fonts comment utiliser des polices non standariées dans une page web

Avant CSS3, les concepteurs de sites web ne pouvait utiliser que des polices qui ont été déjà installés sur l'ordinateur de l'utilisateur.
Aujourd’hui avec CSS3, les concepteurs web peuvent utiliser toutes les polices qu’ils aiment quelles qu’llee soient.
Si vous avez trouvé ou achetez une police et que vous voulez l'utiliser dans les pages de votre site, il suffit  d’inclure le fichier de police sur votre serveur web, et il sera téléchargé automatiquement à l'utilisateur si nécessaire.
Vos  propres polices sont définies dans la règle @font-face de CSS3.
Avec CSS3, les sites Web peuvent enfin utiliser des polices autres que les polices pré-installées.

Somaire

La règle @font-face de CSS3

CSS3 cours tutorial

Prise en charge des navigateurs

Propriété

Appui de navigateur

@font-face

chrome

fire fox

IE

opera

safari

Internet Explorer 9 et +, Firefox, Chrome, Safari et Opera prennent en charge la police WOFF (Web Open Font Format).

Firefox, Chrome, Safari et Opera support fonts de type TTF (True Type Fonts) et la FTO (Fonts OpenType).

Chrome, Safari et Opera soutiennent également des polices SVG.

Internet Explorer prend également en charge les polices EOT (Embedded OpenType).

Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas la règle @font-face.


Comment utiliser la police qu’on souhaite

Dans la nouvelle règle  @font-face, vous devez d'abord définir un nom pour la police (par exemple maPolice)  puis pointez sur le fichier de police avec la règle @font-face comme le montre l’exemple ci dessous.

Pour utiliser la police d'un élément HTML, se référer au nom de la police (myFirstFont) par le biais de la propriété font-family :

Exemple

  Lien pour télécharger la police utilisé dans l'exemple

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>fonts</title>
<style>
@font-face
{
font-family: mapolice;
src:url(../font/tasselxp.ttf); }

div
{
 font: bold 28px mapolice ;
}
</style>
</head>
<body>

<div>
@ Avec CSS3, les sites Web peuvent enfin utiliser des polices autres que les polices pré-installées.
</div>
<p><a href="../font/ tasselxp.ttf">Lien pour télécharger la police utilisé dans l'exemple</a></p>
</body>
</html>
 

astuce Astuce : Utiliser des lettres minuscules dans l'URL de la police. Les lettres majuscules peuvent donner des résultats inattendus dans certains explorateurs


CSS3 Descripteurs de police

Le tableau suivant répertorie tous les descripteurs de police qui peuvent être définis dans la règle de @font-face :

Descripteur

Values

Description

font-family

name

Obligatoire. Définit un nom pour le font

src

URL

Obligatoire. Définit l'URL du fichier font

font-stretch

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Facultatif. Définit comment le font doit être étiré. Pard défaut "normal"

font-style

normal
italic
oblique

Facultatif. Définit le style du font. Défaut "normal"

font-weight

normal
bold
100
200
300
400
500
600
700
800
900

Facultatif. Définit la grasse du font. Défaut "normal"

unicode-range

unicode-range

Facultatif. Définit le dommaine UNICODE que la police doit supporté. Défaut "U+0-10FFFF"

Par carabde 10 mars 2014

chapitre précédent sommaire chapitre suivant