CSS3 : L'ère des "Icon Fonts"

E9003187f516620ccaa576d3d30690ba?s=47 iamcharp
April 23, 2013

CSS3 : L'ère des "Icon Fonts"

Plongez à l'interieur du processus de creation et d'utilisation d'une "Icon Font".

E9003187f516620ccaa576d3d30690ba?s=128

iamcharp

April 23, 2013
Tweet

Transcript

  1. Martin Charpentier & Thibaut Baillet CSS3 : L'ÈRE DES "ICON

    FONTS"
  2. Front-end développeur @bailletthibaut thibaut.baillet@mfglabs.com Thibaut Baillet Lead Designer @im_charp martin.charpentier@mfglabs.com

    Martin Charpentier
  3. MFG Labs www.mfglabs.com twitter: @mfg_labs contact@mfglabs.com

  4. TECHNIQUES

  5. Grilles guides et cercles (Pour conserver une unité d’un pictogramme

    à l’autre il faut s’astreindre à respecter des règles)
  6. Proportions et formes (Le respect strict de règles mathématiques n’est

    pas indispensable. L’utilisation de formes géometriques permettent de structurer plus harmonieusement les courbes et formes qui constituent l’icône.)
  7. Du fichier .AI au .OTF GLYPHS app

  8. Glyphs

  9. Copier / coller

  10. Ascendante & descendante

  11. Alignement

  12. Assignement des unicodes

  13. UNICODE

  14. Unicode : standard pour les caractères Des milliers d’unicodes pour

    les formes et symboles (Arrows, Currency Symbols, Geometic Shapes, etc...) Standardise l’utilisation d’icônes
  15. Assignement logique d’unicode MFG Labs Icons Name Unicode Pencil 0x1f4c5

    Cloud 0x2601 Fallback Anchor 0x2693
  16. Private use area Assignement au gamme private use plutôt qu’à

    des unicodes correspondant à des lettres Range : E000 ... F8FF (6400 UNICODES)
  17. www.fileformat.info

  18. http://www.unicode.org/charts/

  19. HTML5 & CSS3

  20. Les formats (compatibilités) EOT AA WOFF AA TTF AA

  21. Compatibilités mobiles SVG AA TTF AA

  22. @font-face

  23. Font face Kit

  24. Font face Kit

  25. Class générique

  26. Implémentation CSS HTML

  27. Implémentation CSS Fix IE7 & 8 https://gist.github.com/Thibaut-B/5383783 HTML

  28. Customisation 1x 2x 3x

  29. Customisation

  30. Customisation

  31. Retina ready

  32. Performance Image sprite : 650kb Yslow: 82 Google Speed Score

    : 90 TTF Font : 11kb Yslow: 88 Google Speed Score : 96 * source : http://goo.gl/tpOKt
  33. http://mfglabs.github.io/mfglabs-iconset/ http://www.fontello.com

  34. MERCI Front-end développeur @bailletthibaut thibaut.baillet@mfglabs.com Thibaut Baillet Lead Designer @im_charp

    martin.charpentier@mfglabs.com Martin Charpentier
  35. http://designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/ https://github.com/blog/1135-the-making-of-octicons http://www.somerandomdude.com/2012/01/31/font-embedding-icons-the-right-way/ http://www.codestyle.org/css/at-font-face/StandardUnicodeIconsWebFonts.shtml http://www.fileformat.info/info/unicode/char/a.htm Liens utiles

  36. None