Hon za fonty na webu
s krátkým vydechnutím u CSS 3 a JS



Jan Sládek
Jsme dva roky za světem?
CSS 3
Obří specifikace


41 modulů.
Začněme je využívat již dnes.
i. Drobné triky pro každý den
ii. Web Fonts
i. border-radius
ii. RGBA colors
WEBEXPO 2009




<div style="background-color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px soli...
WEBEXPO 2009




<div style="
background: rgba(255, 255, 255, 0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
b...
Border-radius či RGBA ale
některé prohlížeče neumí.
A klient to nutně vyžaduje.
Introducing Modernizr
<blockquote>




Modernizr is a small and simple JavaScript library
that helps you take advantage of emerging web
technolo...
.borderradius div p {
  /* properties for browsers that
     support border-radius */
}
.no-borderradius div p {
  /* opti...
Stránky nemusí vypadat
ve všech prohlížečích
stejně. Musí ale fungovat.
ii. Web Fonts
<blockquote>




Typografie = UI
Texty = UI
Jan Korbel, WebExpo, 16. 10. 2009
<blockquote>




Mohu používat font X na
svých webových
stránkách?
Anonymní designér
i. Typeface.js
ii. Cufón
iii.sIFR
iv.FLIR
v. Image replacement
i. Obcházíme prohlížeče
ii. Použitelné pouze pro
  nadpisy a krátké texty
<blockquote>




Web Fonts - The
Next Big Thing
Håkon Wium Lie, A List Apart, srpen 2007
@font-face
@font-face {
  font-family:'Graublau Web';
  src: url(http://site/GraublauWeb.ttf);
}

p { font-family:'Graublau Web', ser...
i. Podpora v prohlížečích
ii. Licencování
@font-face {
  font-family: 'Graublau Web';
  src: url(http://site/GraublauWeb.ttf);
}

p { font-family: 'Graublau Web', s...
Přidejme špetku černé magie
díky skvělé práci Jonathana Snooka a Paula Irishe.
IE podporuje @font-face
od verze 4!
Ale pouze ve formátu EOT
✓  ttf2eot: code.google.com/p/ttf2eot
✓  OTF je nutné zkonvertovat do TTF
nebo použij:
✓   FontSq...
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot);
  src: local('Graublau Web Regular'),
       loc...
<blockquote>




Chrome needs to
support @font-face
immediately.
Jeffrey Zeldman, Twitter, 25. září 2009
Povol @font-face v Google Chrome:

−−enable-remote-fonts
Zachrání nás SVG
✓   xmlgraphics.apache.org/batik/tools/font-converter.html

    java -jar batik-ttf2svg.jar
    ./MuseoSa...
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot);
  src: local('Graublau Web Regular'),
       loc...
V září 2009 by tak vidělo fonty s @font-face



80% uživatelů
Ostatní uvidí standardní fallback web-safe font
Performance issues


Flash Of Unstyled Text
i. Gzip
ii. Cache
iii.Lazy Load
Pár dalších tipů
paulirish.com/2009/fighting-the-font-face-fout/

www.phpied.com/gzip-your-font-face-files/
Stali se z nás mistři černé magie
vkládání fontů na stránky.

Teď ještě nějaké fonty získat.

@font-face umožňuje načítat ...
Stažení fontu je pak tak
snadné, jako stažení obrázku.
You wouldn’t steel a font!
Microsoft to věděl v roce 1997.
Vymyslel proto Embeded OpenType.
i. Kompaktní forma OTF
ii. Subsetting
iii. Encryption (trusted roots)
V roce 2007 bylo navrženo,
aby byl formát EOT
zařazen do specifikace.

W3C odmítlo.
EOT ještě jednou
Znovu podáno v roce 2008. Specifikace v
současnosti koncovku .eot zná.
WOFF File Format
i.   The font data is compressed, it will use
     less bandwidth and will load faster
     than with TrueType or OpenType...
Jaké fonty tedy můžeme
používat?
See EULA.
<blockquote>




There are thousands of freely available
font families out there and by pointing to
them from your style s...
i. www.fontsquirrel.com/fontface
ii. Spyrestudio.com
iii. kernest.com
iv. webfonts.info


Volně dostupné fonty
Někdo vidí problém, jiný
příležitost.
Typekit, Typotheque,
Fontdeck, Kernest
Kam dál? Na Google.
nebo můj blog withoutanswers.com
<blockquote>




Here's a question. Are sIFR
and Cufon still relevant now
we have @font-face solutions?
Andy Clarke, Twitt...
<blockquote>




Vypadá to, že brzy přijde doba, kdy
každý webdesigner bude schopen
snadno použít písmo, které se mu
líbí....
Díky za pozornost.
Jan Sládek
jan@withoutanswers.com   Clevis s.r.o.
withoutanswers.com       jan.sladek@clevis.cz
twitter...
Hon za fonty na webu
Upcoming SlideShare
Loading in …5
×

Hon za fonty na webu

5,965 views

Published on

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

Published in: Technology, Art & Photos
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
5,965
On SlideShare
0
From Embeds
0
Number of Embeds
464
Actions
Shares
0
Downloads
24
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Hon za fonty na webu

  1. 1. Hon za fonty na webu s krátkým vydechnutím u CSS 3 a JS Jan Sládek
  2. 2. Jsme dva roky za světem?
  3. 3. CSS 3
  4. 4. Obří specifikace 41 modulů. Začněme je využívat již dnes.
  5. 5. i. Drobné triky pro každý den ii. Web Fonts
  6. 6. i. border-radius ii. RGBA colors
  7. 7. WEBEXPO 2009 <div style="background-color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #000; padding: 10px;">WEBEXPO 2009</div>
  8. 8. WEBEXPO 2009 <div style=" background: rgba(255, 255, 255, 0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #000; padding: 10px;">WEBEXPO 2009</div>
  9. 9. Border-radius či RGBA ale některé prohlížeče neumí. A klient to nutně vyžaduje.
  10. 10. Introducing Modernizr
  11. 11. <blockquote> Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. What Is Modernizr, modernizr.com
  12. 12. .borderradius div p { /* properties for browsers that support border-radius */ } .no-borderradius div p { /* optional fallback properties for browsers that don't */ }
  13. 13. Stránky nemusí vypadat ve všech prohlížečích stejně. Musí ale fungovat.
  14. 14. ii. Web Fonts
  15. 15. <blockquote> Typografie = UI Texty = UI Jan Korbel, WebExpo, 16. 10. 2009
  16. 16. <blockquote> Mohu používat font X na svých webových stránkách? Anonymní designér
  17. 17. i. Typeface.js ii. Cufón iii.sIFR iv.FLIR v. Image replacement
  18. 18. i. Obcházíme prohlížeče ii. Použitelné pouze pro nadpisy a krátké texty
  19. 19. <blockquote> Web Fonts - The Next Big Thing Håkon Wium Lie, A List Apart, srpen 2007
  20. 20. @font-face
  21. 21. @font-face { font-family:'Graublau Web'; src: url(http://site/GraublauWeb.ttf); } p { font-family:'Graublau Web', serif; }
  22. 22. i. Podpora v prohlížečích ii. Licencování
  23. 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. 24. Přidejme špetku černé magie díky skvělé práci Jonathana Snooka a Paula Irishe.
  25. 25. IE podporuje @font-face od verze 4!
  26. 26. Ale pouze ve formátu EOT ✓ ttf2eot: code.google.com/p/ttf2eot ✓ OTF je nutné zkonvertovat do TTF nebo použij: ✓ FontSquirell (beta): www.fontsquirrel.com/ fontface/generator
  27. 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. 28. <blockquote> Chrome needs to support @font-face immediately. Jeffrey Zeldman, Twitter, 25. září 2009
  29. 29. Povol @font-face v Google Chrome: −−enable-remote-fonts
  30. 30. Zachrání nás SVG ✓ xmlgraphics.apache.org/batik/tools/font-converter.html java -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. 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. 32. V září 2009 by tak vidělo fonty s @font-face 80% uživatelů Ostatní uvidí standardní fallback web-safe font
  33. 33. Performance issues Flash Of Unstyled Text
  34. 34. i. Gzip ii. Cache iii.Lazy Load
  35. 35. Pár dalších tipů paulirish.com/2009/fighting-the-font-face-fout/ www.phpied.com/gzip-your-font-face-files/
  36. 36. Stali se z nás mistři černé magie vkládání fontů na stránky. Teď ještě nějaké fonty získat. @font-face umožňuje načítat fonty ve své čisté podobě. Tedy TTF a OTF.
  37. 37. Stažení fontu je pak tak snadné, jako stažení obrázku.
  38. 38. You wouldn’t steel a font!
  39. 39. Microsoft to věděl v roce 1997. Vymyslel proto Embeded OpenType.
  40. 40. i. Kompaktní forma OTF ii. Subsetting iii. Encryption (trusted roots)
  41. 41. V roce 2007 bylo navrženo, aby byl formát EOT zařazen do specifikace. W3C odmítlo.
  42. 42. EOT ještě jednou Znovu podáno v roce 2008. Specifikace v současnosti koncovku .eot zná.
  43. 43. WOFF File Format
  44. 44. i. The font data is compressed, it will use less bandwidth and will load faster than with TrueType or OpenType files. ii. Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. iii. Both proprietary and free-software browser vendors like the WOFF format.
  45. 45. Jaké fonty tedy můžeme používat?
  46. 46. See EULA.
  47. 47. <blockquote> 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. Håkon Wium Lie, Zdroják, 2008
  48. 48. i. www.fontsquirrel.com/fontface ii. Spyrestudio.com iii. kernest.com iv. webfonts.info Volně dostupné fonty
  49. 49. Někdo vidí problém, jiný příležitost.
  50. 50. Typekit, Typotheque, Fontdeck, Kernest
  51. 51. Kam dál? Na Google. nebo můj blog withoutanswers.com
  52. 52. <blockquote> Here's a question. Are sIFR and Cufon still relevant now we have @font-face solutions? Andy Clarke, Twitter, 6. září 2009
  53. 53. <blockquote> Vypadá to, že brzy přijde doba, kdy každý webdesigner bude schopen snadno použít písmo, které se mu líbí. Předem lituji uživatele. Miloslav Lešetický, Twitter, 15. 10. 2009
  54. 54. Díky za pozornost. Jan Sládek jan@withoutanswers.com Clevis s.r.o. withoutanswers.com jan.sladek@clevis.cz twitter.com/zahon clevis.cz

×