22. AVANTAGES
Accessibilité.
CSS3: implémentation très simple.
Pas de javascript ou de flash.
23. INCONVÉNIENTS
Pas encore supporté par tous les navigateurs.
Problème de copyright: la police est téléchargeable.
Rendu pas toujours très bon.
24. FORMATS DE POLICES
TrueType
OpenType
EOT (Embedded Open Type)
WOFF (en cours de standardisation par le W3C)
SVG
25. IMPLÉMENTATION
Charger la police sur le serveur,
puis seulement deux lignes dans le CSS:
@font-face{font-family: Quicksand; src: url('Quicksand.otf');}
h3{font-family: "Quicksand", Gil Sans, arial, sans-serif;}
26. IMPLÉMENTATION AVANCÉE
Pour s’assurer d’une meilleure compatibilité sur les navigateurs.
@font-face {
font-family: Graublauweb;
src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */
url('Graublauweb.woff') format('woff'), /* Modern Browsers */
url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */
url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}
28. OPTIONS DU GÉNÉRATEUR
Apply Hinting - Fix Vertical Metrics - Remove Kerning -
Fix Missing Glyphs - X-height Matching
WebOnly - Subset Fonts - Style Linking - Base64 Encode
OpenType Options - Font Name Suffix - Em Square Value
Adjust Spacing - Postscript Hinting
29. TROUVER DES POLICES
Font Squirrel
http://fontsquirrel.com/
The League of Movable Type
http://theleagueofmoveabletype.com/
Open Font Library
http://openfontlibrary.org/
Exljbris
http://exljbris.com/
31. TYPEKIT
Solution payante, qui utilise des fonts professionnelles offertes
en partenariat avec des fondries comme Adobe, FontFont, Veer
ou Büro Destrukt.
32. AVANTAGES
Polices professionnelles.
Pas de problèmes de copyright.
Installation simple.
33. INCONVÉNIENTS
Paiement par abonnement.
Javascript.
Les fonts sont hébergées ailleurs, requêtes DNS
supplémentaires.
34. IMPLÉMENTATION
Deux lignes de code à ajouter dans le <head>,
puis choisir ses polices et les ajouter au kit.
Pour finir, ajout d’un sélecteur où on veut utiliser la police.
38. AVANTAGES
Pas de problèmes de copyright.
Installation (très) simple.
API disponible pour les dévelopeurs.
39. INCONVÉNIENTS
Peu de polices (environ une centaine).
Javascript.
Les fonts sont hébergées ailleurs, requêtes DNS
supplémentaires.
40. IMPLÉMENTATION
Dans le <head>
<link href='http://fonts.googleapis.com/css?family=Michroma'
rel='stylesheet' type='text/css'>
Dans le CSS
h1 { font-family: 'Michroma', arial, serif; }
41. DES QUESTIONS?
Je mettrai toutes les sources mentionnées dans cette
présentation sur http://webmardi.ch
dès demain.