Hon za fonty na webu

  • Published on
    28-Jan-2015

  • View
    105

  • Download
    2

Embed Size (px)

DESCRIPTION

My talk given at Web Expo 2009 web design conference. It's mostly about Web Fonts.

Transcript

<ul><li> 1. Hon za fonty na webu s krtkm vydechnutm u CSS 3 a JSJan Sldek </li></ul> <p> 2. Jsme dva roky za svtem? 3. CSS 3 4. Ob specikace 41 modul. Zanme je vyuvat ji dnes. 5. i. Drobn triky pro kad den ii. Web Fonts 6. i. border-radius ii. RGBA colors 7. WEBEXPO 2009 </p> <div>WEBEXPO 2009</div> <p> 8. WEBEXPO 2009 </p> <div>WEBEXPO 2009</div> <p> 9. Border-radius i RGBA ale nkter prohlee neum. A klient to nutn vyaduje. 10. Introducing Modernizr 11. Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a ne level of control over older browsers that may not yet support these new technologies.What Is Modernizr, modernizr.com 12. .borderradius div p { /* properties for browsers thatsupport border-radius */ } .no-borderradius div p { /* optional fallback propertiesfor browsers that don't */ } 13. Strnky nemus vypadat ve vech prohlech stejn. Mus ale fungovat. 14. ii. Web Fonts 15. Typograe = UI Texty = UI Jan Korbel, WebExpo, 16. 10. 2009 16. Mohu pouvat font X na svch webovch strnkch? Anonymn designr 17. i. Typeface.js ii. Cufn iii.sIFR iv.FLIR v. Image replacement 18. i. Obchzme prohlee ii. Pouiteln pouze pro nadpisy a krtk texty 19. Web Fonts - The Next Big Thing Hkon Wium Lie, A List Apart, srpen 2007 20. @font-face 21. @font-face { font-family:'Graublau Web'; src: url(http://site/GraublauWeb.ttf); }p { font-family:'Graublau Web', serif; } 22. i. Podpora v prohlech ii. Licencovn 23. @font-face { font-family: 'Graublau Web'; src: url(http://site/GraublauWeb.ttf); }p { font-family: 'Graublau Web', serif; }3.5+ 3.1+ 10 24. Pidejme petku ern magie dky skvl prci Jonathana Snooka a Paula Irishe. 25. IE podporuje @font-face od verze 4! 26. Ale pouze ve formtu EOT ttf2eot: code.google.com/p/ttf2eot OTF je nutn zkonvertovat do TTF nebo pouij: FontSquirell (beta): www.fontsquirrel.com/ fontface/generator 27. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot); src: local('Graublau Web Regular'),local('Graublau Web'), url('GraublauWeb.otf') format('opentype'); } 3.5+ 3.1+ 10 4+ 28. Chrome needs to support @font-face immediately. Jerey Zeldman, Twitter, 25. z 2009 29. Povol @font-face v Google Chrome:enable-remote-fonts 30. Zachrn ns SVG xmlgraphics.apache.org/batik/tools/font-converter.htmljava -jar batik-ttf2svg.jar ./MuseoSans-500.ttf -o museo.svg -id museo snook.ca/archives/html_and_css/becoming-a-font-embedding-master FontSquirell (beta): www.fontsquirrel.com/fontface/generator 31. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot); src: local('Graublau Web Regular'),local('Graublau Web'), url('GraublauWeb.svg#lg') format('svg'), url('GraublauWeb.otf') format('opentype'); }3.5+ 3.1+10 4+ 0.3+iPhone OS 3.1 32. V z 2009 by tak vidlo fonty s @font-face80% uivatel Ostatn uvid standardn fallback web-safe font 33. Performance issues Flash Of Unstyled Text 34. i. Gzip ii. Cache iii.Lazy Load 35. Pr dalch tip paulirish.com/2009/ghting-the-font-face-fout/www.phpied.com/gzip-your-font-face-les/ 36. Stali se z ns misti ern magie vkldn font na strnky.Te jet njak fonty zskat.@font-face umouje natat fonty ve sv ist podob. Tedy TTF a OTF. 37. Staen fontu je pak tak snadn, jako staen obrzku. 38. You wouldnt steel a font! 39. Microsoft to vdl v roce 1997. Vymyslel proto Embeded OpenType. 40. i. Kompaktn forma OTF ii. Subsetting iii. Encryption (trusted roots) 41. V roce 2007 bylo navreno, aby byl formt EOT zaazen do specikace.W3C odmtlo. 42. EOT jet jednou Znovu podno v roce 2008. Specikace v souasnosti koncovku .eot zn. 43. WOFF File Format 44. i. The font data is compressed, it will useless bandwidth and will load fasterthan with TrueType or OpenType les. ii. Many font vendors that are unwillingto license their TrueType or OpenTypeformat fonts for use on the web willlicense WOFF format fonts. iii. Both proprietary and free-softwarebrowser vendors like the WOFF format. 45. Jak fonty tedy meme pouvat? 46. See EULA. 47. There are thousands of freely available font families out there and by pointing to them from your style sheet, they can be used in your web pages. This will change the face of the web.Hkon Wium Lie, Zdrojk, 2008 48. i. www.fontsquirrel.com/fontface ii. Spyrestudio.com iii. kernest.com iv. webfonts.info Voln dostupn fonty 49. Nkdo vid problm, jin pleitost. 50. Typekit, Typotheque, Fontdeck, Kernest 51. Kam dl? Na Google. nebo mj blog withoutanswers.com 52. Here's a question. Are sIFR and Cufon still relevant now we have @font-face solutions? Andy Clarke, Twitter, 6. z 2009 53. Vypad to, e brzy pijde doba, kdy kad webdesigner bude schopen snadno pout psmo, kter se mu lb. Pedem lituji uivatele. Miloslav Leetick, Twitter, 15. 10. 2009 54. Dky za pozornost. Jan Sldek jan@withoutanswers.com Clevis s.r.o. withoutanswers.com jan.sladek@clevis.cz twitter.com/zahonclevis.cz </p>