docCSS et Polices de caractères
download 
Plainte Transcription
CSS et Polices de caractères
CSS et Polices de caractères
Usage classique des polices en CSS
La propriété CSS qui permet d'indiquer la police à utiliser est font-family. Vous devez écrire le nom de la
police comme ceci :
balise
{
font-family: police;
}
Seulement, pour éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en général
plusieurs noms de police, séparés par des virgules :
balise
{
font-family: police1, police2, police3, police4;
}
Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas, il
passera à la police3, et ainsi de suite. En général, on indique en tout dernier serif, ce qui correspond à une
police par défaut (qui ne s'applique que si aucune autre police n'a été trouvée).
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs : Arial ; Arial Black ; Courier
New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ;Verdana.
Ainsi, quand on écrit :
p
{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
… cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana,
ou si rien n'a marché, mets une police standard (sans-serif) ».
Usage des polices en CSS3
Aujourd'hui, avec CSS 3, il existe un moyen d'utiliser d'autres polices sur son site. Cela fonctionne bien avec
la plupart des navigateurs.
Mais attention, il y a des défauts (ce serait trop beau sinon) :
• Il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la police, dont le
poids peut atteindre, voire dépasser 1 Mo…
• La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son
site. Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui proposent en
téléchargement un certain nombre de polices libres de droits.
Voici les différents formats de fichiers de polices qui existent et qu'il faut connaître :
• .ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
• .eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce
format est propriétaire, produit par Microsoft.
• .otf : OpenType Font. Ne fonctionne pas sur Internet Explorer.
Typo et CSS
page 1/2
• .svg : SVG Font. Le seul format reconnu sur les iPhones et iPads pour le moment.
• .woff : Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous
les autres navigateurs.
Exemple de code :
@font-face {
font-family: 'MaSuperPolice';
src: url('MaSuperPolice.eot') format('eot'),
url('MaSuperPolice.woff') format('woff'),
url('MaSuperPolice.ttf') format('truetype'),
url('MaSuperPolice.svg') format('svg');
}
Utiliser les google font
Il faut se rendre sur le site de google fonts : http://www.google.com/fonts/
Après avoir fait votre choix dans la bibliothèques de polices de google, cliquez sur le
lien "Quick use" associé à police de vos rêves.
Si besoin, choisissez les tailles de police dont vous aurez besoin, et copiez le code que vous présente
google web font "Add this code to your website".
Copiez ensuite ce code à l'intérieur de la balise <head></head> du code HTML de votre site (Remplacer
dans l'exemple ci dessous NOMDELAFONT par le nom de votre police).
<head>
<link href='http://fonts.googleapis.com/css?family=NOMDELAFONT'
rel='stylesheet' type='text/css'>
<!-- il y a certainement d'autres lignes de code à l'intérieur de votre
balise head, veillez à ne pas les effacer ! →
</head>
Ce code vous permet d'utiliser votre police google préférée n'importe où dans votre site (ici
NOMDELAFONT) en la chargeant directement depuis le site de Google web font. Il ne vous reste plus qu'à
déclarer votre nouvelle font dans votre feuille de style via la propriété CSS font-family.
body{
font-family:NOMDELAFONT, Arial;
}
Remplacer NOMDELAFONT par le nom de votre police.
Utiliser la police d’icônes font awesome
Tout d’abord appelez la librairie, dans votre header entre <head> et </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet">
Vous pouvez aussi héberger vous même Font Awesome. Pour tous les réglages, rendez-vous sur la page
“Get started” de Font Awesome : http://fortawesome.github.io/Font-Awesome/get-started/
Une fois votre configuration faite, insérez dans votre code les balises <i> et le tour est joué.
Font Awesome a le même comprotement que le texte. Vous pouvez donc changer la couleur par exemple.
Ex. : <i class="fa fa-rocket" style="color:#4e9cc6;"></i>
Pour une icône plus grande vous pouvez compléter avec les class suivantes :
<i class="fa fa-rocket fa-2x"></i> <i class="fa fa-rocket fa-3x"></i> <i
class="fa fa-rocket fa-4x"></i> <i class="fa fa-rocket fa-5x"></i>
Typo et CSS
page 2/2
Documents pareils
Font Awesome - 31 place Web
- font-awesome.min.css (version compressée) et placez-le dans votre propre dossier
CSS (blog du webmaster)
- Tout le contenu du dossier [fonts] qui sera placé dans votre propre dossier [fonts]
