OUJOOD.COM
La règle @font-face de CSS3
CSS3 cours tutorialPrise en charge des navigateurs
|
Propriété |
Appui de navigateur |
||||
|---|---|---|---|---|---|
|
@font-face |
|
|
|
|
|
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
Exemple : 📋 Copier 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 : 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
|
Facultatif. Définit comment le font doit être étiré. Pard défaut "normal" |
|
font-style |
normal
|
Facultatif. Définit le style du font. Défaut "normal" |
|
font-weight |
normal
|
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" |
chapitre précédent chapitre suivant