CSS
Des polices personnalisées !
Typeface.js   Cufón

   sIFR       FLIR
Typeface.js                   Cufón
       JavaScript          Inaccessible
                pas stylable
Flash            ...
@font-face
Petite histoire :
      Introduit en CSS2 (1998)
Supporté par IE et NS, mais pas en TTF
        Supprimé de CSS 2.1
   App...
Compatible :
     IE 4+
 Firefox 3.5+
  Safari 3.1+
 Opera 10+
Chrome 3.0b+
Avantages :
C’est vous qui gérez !
   Maintenabilité
    Accessibilité
    Performance
     Utilisabilité
Formats :

         IE : EOT
   Les autres : TTF, OTF
+ Opera et Chrome : SVG
Bientôt WOFF (Firefox 3.6)
TTF & OTF ?

      Pas des formats web
  Peuvent être piratés facilement
Uniquement utilisable en police libre
WOFF & EOT ?
      Restriction technique à un site
Inutilisable ailleurs en local ou sur le web


             + dans WOFF...
3 lignes :

@font-face {
    font-family: "Scrogglet"; /* Nom de famille */
    src: url(Scrogglet.eot); /* IE */
    src:...
Et hop !

h1 {
    font-family: "Scrogglet", Arial, sans-serif;
    color: red;
    font-weight: bold;
    letter-spacing:...
•   http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/
Examples !
                     Bons :
•http://www.mozilla.com/en-US/firefox/3.6b3/firstrun/
•http://nicewebtype.com/fonts/g...
Performances
                 FOUT : Flash Of Unstyled Text


Firefox et Opera chargent la page avec une police système
  ...
Performances
                     Chargements




IE télécharge la police dès qu’il rencontre @font-face
Les autres : Dès ...
Performances
               Et si le chargement plante ?


   Firefox & Opera : Le texte est en police système
Safari : Af...
Optimisons !
FontForge et FontSquirrel pour réduire la palette
     Gzip pour gagner jusqu’à +40% de poids
       Cache et...
Lazy Loading ?
                    Chargement come sur Firefox

function lazyLoad() {

 var sRule1 =

 
 "@font-face {" +
...
On retient ?
3 lignes de CSS
Optimisez les performances !
Lazy Loading = important
Adieu Cufón, Flash, ...
http://yves.vg
    Yves Van Goethem
                            novembre 2009   http://twitter.com/yvg



                ...
Upcoming SlideShare
Loading in …5
×

CSS @font-face : Des polices personnalisées

7,885
-1

Published on

Nous disposons enfin d’un support de la règle CSS @font-face sur la plupart des navigateurs du marché. On fera un tour d’horizon de leurs implémentations, des avantages et des contraintes que cela apporte, ainsi que quelques bonnes pratiques pour son utilisation.

Published in: Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,885
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
39
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • CSS @font-face : Des polices personnalisées

    1. 1. CSS Des polices personnalisées !
    2. 2. Typeface.js Cufón sIFR FLIR
    3. 3. Typeface.js Cufón JavaScript Inaccessible pas stylable Flash PHP sIFR non imprimable FLIR Lent Contraignant GD
    4. 4. @font-face
    5. 5. Petite histoire : Introduit en CSS2 (1998) Supporté par IE et NS, mais pas en TTF Supprimé de CSS 2.1 Apparition dans Safari et Firefox Ré-introduit en CSS3
    6. 6. Compatible : IE 4+ Firefox 3.5+ Safari 3.1+ Opera 10+ Chrome 3.0b+
    7. 7. Avantages : C’est vous qui gérez ! Maintenabilité Accessibilité Performance Utilisabilité
    8. 8. Formats : IE : EOT Les autres : TTF, OTF + Opera et Chrome : SVG Bientôt WOFF (Firefox 3.6)
    9. 9. TTF & OTF ? Pas des formats web Peuvent être piratés facilement Uniquement utilisable en police libre
    10. 10. WOFF & EOT ? Restriction technique à un site Inutilisable ailleurs en local ou sur le web + dans WOFF Compression directe Licence intégrée au fichier
    11. 11. 3 lignes : @font-face { font-family: "Scrogglet"; /* Nom de famille */ src: url(Scrogglet.eot); /* IE */ src: local("Scrogglet"), url(Scrogglet.ttf) format("truetype"); }
    12. 12. Et hop ! h1 { font-family: "Scrogglet", Arial, sans-serif; color: red; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
    13. 13. • http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/
    14. 14. Examples ! Bons : •http://www.mozilla.com/en-US/firefox/3.6b3/firstrun/ •http://nicewebtype.com/fonts/graublau-sans-web/ •http://www.kleenhanz.com/ Mauvais : •http://craigmod.com/journal/font-face/ (2.5Mo de polics) •http://hsivonen.iki.fi/ (4Mo de polices)
    15. 15. Performances FOUT : Flash Of Unstyled Text Firefox et Opera chargent la page avec une police système Les autres : affichent le texte une fois la police chargée IE n’affiche rien avant que la police soit chargée si une balise script se situe avant @font-face.
    16. 16. Performances Chargements IE télécharge la police dès qu’il rencontre @font-face Les autres : Dès qu’ils le rencontrent dans font-family
    17. 17. Performances Et si le chargement plante ? Firefox & Opera : Le texte est en police système Safari : Affiche le texte en police système après 60secs IE met 10 minutes à faire pareil que Safari Chrome (beta 3) n’affiche jamais le texte...
    18. 18. Optimisons ! FontForge et FontSquirrel pour réduire la palette Gzip pour gagner jusqu’à +40% de poids Cache et téléchargements parallèles Lazy Loading en JavaScript, au moins pour IE Définissez @font-face avant des <script> Supprimer les règles @font-face non utilisées
    19. 19. Lazy Loading ? Chargement come sur Firefox function lazyLoad() { var sRule1 = "@font-face {" + " font-family: 'Yanone';" + " src: url('/bin/resource.cgi?type=font&sleep=6');" + " src: local('Yanone'), " + "url('/bin/resource.cgi?type=font&sleep=6') " + "format('truetype');" + "}"; var style1 = document.styleSheets[0]; if ( "function" === typeof(style1.insertRule) ) { // Firefox, Safari, Chrome style1.insertRule(sRule1, 0); } else if ( "string" === typeof(style1.cssText) ) { // IE style1.cssText = sRule1; } }
    20. 20. On retient ?
    21. 21. 3 lignes de CSS
    22. 22. Optimisez les performances !
    23. 23. Lazy Loading = important
    24. 24. Adieu Cufón, Flash, ...
    25. 25. http://yves.vg Yves Van Goethem novembre 2009 http://twitter.com/yvg Merci ! Sources : • http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/ • http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/ Ressources : • http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/ • http://kernest.com/ • http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding • http://opentype.info/demo/webfontdemo.html • http://openfontlibrary.org/media/view/media/fonts Outils : • http://fontforge.sourceforge.net/ • http://www.fontsquirrel.com/fontface/generator
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×