Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bulletproof Font Icons

Bulletproof Font Icons

Originally presented at CSSConf 2014: http://2014.cssconf.com/#zach

zachleat

May 27, 2014
Tweet

More Decks by zachleat

Other Decks in Programming

Transcript

  1. If you wish to make a font icon from scratch,

    you must first invent the universe. —Carl Sagan, probably https://www.flickr.com/photos/scott-s_photos/11763686274 “ ”
  2. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING.. . .. .
  3. @font-­‐face  {   !   font-­‐family:  The  Font  that  Could;

        src:url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   ! }
  4. @font-­‐face  {   !   font-­‐family:  The  Font  that  Could;

        src:url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   ! }
  5. @font-­‐face  {   !   font-­‐family:  The  Font  that  Could;

        src:url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   ! }
  6. @font-­‐face  {   !   font-­‐family:  The  Font  that  Could;

        src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   ! }
  7. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff'),         url('icanfont.svg#icanfont')           format('svg');     font-­‐weight:  normal;     font-­‐style:  normal;   } W R O N G
  8. @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)  {   !   @font-­‐face  {    

      font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   ! }
  9. @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)     and  (min-­‐resolution:  .001dpcm)  {   !

      @font-­‐face  {       font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   ! }
  10. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   }   ! @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)     and  (min-­‐resolution:  .001dpcm)  {   !   @font-­‐face  {       font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   }
  11. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   }   ! @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)     and  (min-­‐resolution:  .001dpcm)  {   !   @font-­‐face  {       font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   } REMOVE AFTER CHROME DIRECTWRITE
  12. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…
  13. BASIC LATIN CODE POINT Arial Chunk Five x41 A A

    x42 B B x43 C C x44 D D x45 E E
  14. Arial Chunk Five 0x1F300 0x1F302 0x1F350 Arial Chunk Five 0x1F300

    0x1F302 0x1F350 EMOJI http://doeschromesupportemojiyet.com/ https://code.google.com/p/chromium/issues/detail?id=62435
  15. READ AS x2261 ≡ IDENTICAL TO x2605 ˒ BLACK STAR

    or STAR x2665 ♥ HEART SUIT ACCESSIBILITY
  16. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…
  17. Timeouts/CURFEWS 34 > 60 s 36 28 9, 10, 11

    N/A 20 > 60 s 3 s 3 s 7 60 s 4.1 > 60 s * 6 > 60 s 60 s* 7
  18. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…
  19. FontFaceOnload(  "My  Icon  Font",     {      

    glyphs:  "\uE600\uE601\uE602\uE605",       success:  function()  {         var  docEl  =  document.documentElement;         docEl.className  +=  "  my-­‐icon-­‐font";       }     }); // requires http://filamentgroup.github.io/a-font-garde/src/fontfaceonload.js
  20. /*  @font-­‐face  omitted  */   ! .my-­‐icon-­‐font  .icon-­‐twitter:before  {  

      font-­‐family:  My  Icon  Font;     content:  "\e600";   }
  21. document.fonts.load("1em  My  Icon  Font")     .then(function()  {   !

        var  docEl  =  document.documentElement;       docEl.className  +=  "  my-­‐icon-­‐font";   !   });
  22. @Font-face THIS ONE WEIRD TRICK A G EN D A

    LET’S GET FANCY UNICODE LOADING…
  23. <style>   .facebook  .icon  {     display:  none;  

    }   .my-­‐icon-­‐font  .facebook  .icon  {     display:  inline-­‐block;   }   .my-­‐icon-­‐font  .facebook  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   </style>   <span  class="facebook">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Facebook</span>   </span> https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L127
  24. <style>   .facebook  .icon  {     display:  none;  

    }   .my-­‐icon-­‐font  .facebook  .icon  {     display:  inline-­‐block;   }   .my-­‐icon-­‐font  .facebook  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   </style>   <span  class="facebook">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Facebook</span>   </span> https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L127
  25. <style>   .hamburger  .icon:before  {     content:  "\2261";  

      /*  Adjust  font-­‐size  and  line-­‐height  to  match  */   }   .hamburger  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   .my-­‐icon-­‐font  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;     content:  "\e601";   !   /*  Reset  font-­‐size  and  line-­‐height  */     font-­‐size:  inherit;     line-­‐height:  inherit;   }   </style>   <span  class="hamburger">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Menu</span>   </span>
  26. <style>   .hamburger  .icon:before  {     content:  "\2261";  

      /*  Adjust  font-­‐size  and  line-­‐height  to  match  */   }   .hamburger  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   .my-­‐icon-­‐font  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;     content:  "\e601";   !   /*  Reset  font-­‐size  and  line-­‐height  */     font-­‐size:  inherit;     line-­‐height:  inherit;   }   </style>   <span  class="hamburger">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Menu</span>   </span>   <span  class="icon"  aria-­‐hidden="true"></span>  
  27. @Font-face THIS ONE WEIRD TRICK A G EN D A

    LET’S GET FANCY UNICODE LOADING…