Bulletproof Font Icons

Transcript

1. N Bulletproof C E U R N

2. LET’S LEARN EVERYTHING ABOUT @FONT-FACE

3. @zachleat zachleat.com

4. None

5. 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 “ ”

6. @Font-face THIS ONE WEIRD TRICK A G EN D A

   CAT FANCY UNICODE LOADING.. . .. .

7. 1997 @font-­‐face

8. 1995 <font>

9. None

10. @font-­‐face

11. CSS3 CSS2.1 CSS2

12. @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;   ! }

13. @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;   ! }

14. @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;   ! }

15. David Hasselwoff USE WOFF

16. Woff caniuse.com 5.0! 6.0 7.0! 7.5!

17. WOFF BY ONE ERROR

18. Woff + TTF caniuse.com 5.0! 6.0 7.0! 7.5!

19. NEED IE8? Add EOT

20. @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;   ! }

21. Woff + TTF + EOT caniuse.com 5.0! 6.0 7.0! 7.5!

22. NEED Chrome + Windows? Add SVG http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

23. 34 8.1 WOFF SVG ISSU E XP

24. Woff + EOT + TTF + SVG https://code.google.com/p/chromium/issues/detail?id=137692 caniuse.com 5.0

    7.0! 7.5! 6.0 6.0

25. @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

26. @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;     }   ! }

27. https://github.com/scottjehl/Device-Bugs/issues/43 ISSU E

28. None

29. @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;     }   ! }

30. Supports   -­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio Supports   min-­‐resolution Yes No Yes No

31. Woff + EOT + TTF + SVG https://code.google.com/p/chromium/issues/detail?id=137692 caniuse.com 5.0

    7.0! 7.5! 6.0 6.0

32. WHEW.

33. A QUICK REVIEW

34. @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;     }   }

35. @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

36. GO TO YOUR HAPPY PLACE

37. LET’s PUT THE @FONT-FACE BLOCK ON OUR WEB PAGE

38. None

39. NO FONT-FAMILY NO DOWNLOAD

40. 34 28 9, 10, 11 20 6.1, 7 2.3, 4.1

    7 8

41. body  {     font-­‐family:  My  Icon  Font,  serif;  

    }

42. var  b  =  document.body;   ! b.style.fontFamily  =  "My  Icon

     Font";

43. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…

44. BASIC LATIN CODE POINT Arial Chunk Five x41 A A

    x42 B B x43 C C x44 D D x45 E E

45. Higher UNICODE Ranges x2261 ≡ x2605 ˒ x2665 ♥ x2713

    ✓

46. 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
47. None

48. CONSISTENCY

49. unicode.johnholtripley.co.uk

50. None

51. READ AS x2261 ≡ IDENTICAL TO x2605 ˒ BLACK STAR

    or STAR x2665 ♥ HEART SUIT ACCESSIBILITY
52. None

53. PRIVATE USE AREA

54. YOUR ICON FONT HERE 0xe001 0xe002 0xe003 0xe004 PRIVATE USE

    AREA

55. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…

56. https://www.flickr.com/photos/79157069@N03/11616536203/ OUR @FONT-FACE REQUEST LEAVES THE NEST

57. LOCAL FONT { @FONT-FACE {

58. None

59. FOIT Flash of Invisible Text

60. @FONT-FACE LOAD

61. https://twitter.com/aanand/status/465182499577286656

62. LOCAL FONT { @FONT-FACE {

63. FOUT Flash of UNSTYLED Text

64. 3 S @FONT-FACE LOAD ABCDEFGH ABCDEFGH

65. 3 S @FONT-FACE LOAD

66. https://twitter.com/raganwald/status/452092613529567233 Screenshot of GitHub

67. LOCAL FONT { @FONT-FACE {

68. 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

69. if font loads after 60 seconds SAFARI IGNORES IT 7

    *Timeout ISSU E 7

70. WHAT HAPPENS WHEN A USER HITS THE STOP BUTTON?

71. LOCAL FONT { @FONT-FACE { ISSU E

72. None

73. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…

74. LET’S FIX EVERYTHING

75. DECORATIVE ICON U SE C A SE

76. <span  class="twitter  icon"     aria-­‐hidden="true"></span>   Share  on  Twitter

77. <span  class="twitter  icon"     aria-­‐hidden="true"></span>   Share  on  Twitter

78. FILAMENTGROUP/A-Font-Garde https://github.com/filamentgroup/a-font-garde

79. 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

80. /*  @font-­‐face  omitted  */   ! .my-­‐icon-­‐font  .icon-­‐twitter:before  {  

      font-­‐family:  My  Icon  Font;     content:  "\e600";   }

81. typekit/webfontloader https://github.com/typekit/webfontloader

82. CSS Font Loading Module Level 3 http://dev.w3.org/csswg/css-font-loading/

83. document.fonts.load("1em  My  Icon  Font")     .then(function()  {   !

        var  docEl  =  document.documentElement;       docEl.className  +=  "  my-­‐icon-­‐font";   !   });

84. BRAMSTEIN/FONTLOADER https://github.com/bramstein/fontloader FOLLOW HE’S WORKING ON A POLYFILL. https://twitter.com/bram_stein/status/465560158723395584

85. my-­‐icon-­‐font   SOLVES OUR PROBLEMS

86. WE NOW CONTROL FOIT & FOUT

87. NO MORE UNICODE SURPRISES TIMEOUT SURPRISES STOP BUTTON SURPRISES

88. DECORATIVE ICON 3 S @FONT-FACE LOAD FOIT FOUT

89. @Font-face THIS ONE WEIRD TRICK A G EN D A

    LET’S GET FANCY UNICODE LOADING…

90. LET’S GET CAT FANCY

91. TEXT to ICON @FONT-FACE LOAD U SE C A SE

92. <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

93. <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

94. GLYPH to ICON ≡ U SE C A SE

95. https://twitter.com/bjankord/status/451367657493647361 Hamburger Helper

96. Hamburger Emoji

97. = Veggieburger

98. – Gluten Free Hamburger https://twitter.com/brouxhaha/status/464787128334180354

99. Facebook’s Manburger https://twitter.com/jedschmidt/status/455871778267463680

100. Hungryman Burger

101. @FONT-FACE LOAD GLYPH to ICON ≡

102. <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>

103. <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>  

104. @Font-face THIS ONE WEIRD TRICK A G EN D A

     LET’S GET FANCY UNICODE LOADING…

105. Different GOALS FOR CONTENT ICONFONTS CONTENT ICON

106. @zachleat Thank you!