Keynote font-icon

509 views
350 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
509
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Keynote font-icon

  1. 1. Martin Charpentier & Thibaut BailletCSS3 : LÈRE DES "ICON FONTS"
  2. 2. Front-end développeur@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin Charpentier
  3. 3. MFG Labswww.mfglabs.comtwitter: @mfg_labscontact@mfglabs.com
  4. 4. TECHNIQUES
  5. 5. Grilles guides et cercles(Pour conserver une unité d’un pictogramme à l’autre il faut s’astreindre à respecter des règles)
  6. 6. Proportions et formes(Le respect strict de règles mathématiques n’est pas indispensable. L’utilisation de formes géometriquespermettent de structurer plus harmonieusement les courbes et formes qui constituent l’icône.)
  7. 7. Du fichier .AI au .OTFGLYPHS app
  8. 8. Glyphs
  9. 9. Copier / coller
  10. 10. Ascendante & descendante
  11. 11. Alignement
  12. 12. Assignement des unicodes
  13. 13. UNICODE
  14. 14. Unicode : standard pour les caractèresDes milliers d’unicodes pour lesformes et symboles(Arrows, Currency Symbols, Geometic Shapes, etc...)Standardise l’utilisation d’icônes
  15. 15. Assignement logique d’unicodeMFG Labs Icons Name UnicodePencil 0x1f4c5Cloud 0x2601FallbackAnchor 0x2693
  16. 16. Private use areaAssignement au gamme private use plutôtqu’à des unicodes correspondant à des lettresRange : E000 ... F8FF (6400 UNICODES)
  17. 17. www.fileformat.info
  18. 18. http://www.unicode.org/charts/
  19. 19. HTML5 & CSS3
  20. 20. Les formats (compatibilités)EOTAAWOFFAATTFAA
  21. 21. Compatibilités mobilesSVGAATTFAA
  22. 22. @font-face
  23. 23. Font face Kit
  24. 24. Font face Kit
  25. 25. Class générique
  26. 26. ImplémentationCSSHTML
  27. 27. ImplémentationCSSFix IE7 & 8https://gist.github.com/Thibaut-B/5383783HTML
  28. 28. Customisation1x 2x 3x
  29. 29. Customisation
  30. 30. Customisation
  31. 31. Customisation
  32. 32. Customisation
  33. 33. Customisation
  34. 34. Retina ready
  35. 35. PerformanceImage sprite : 650kbYslow: 82Google Speed Score : 90TTF Font : 11kbYslow: 88Google Speed Score : 96* source : http://goo.gl/tpOKt
  36. 36. http://mfglabs.github.io/mfglabs-iconset/http://www.fontello.com
  37. 37. MERCIFront-end développeur@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin Charpentier
  38. 38. http://designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/https://github.com/blog/1135-the-making-of-octiconshttp://www.somerandomdude.com/2012/01/31/font-embedding-icons-the-right-way/http://www.codestyle.org/css/at-font-face/StandardUnicodeIconsWebFonts.shtmlhttp://www.fileformat.info/info/unicode/char/a.htmLiens utiles

×