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

1. Hon za fonty na webu
s krátkým vydechnutím u CSS 3 a JS
Jan Sládek

2. Jsme dva roky za světem?

3. CSS 3

4. Obří specifikace
41 modulů.
Začněme je využívat již dnes.

5. i. Drobné triky pro každý den
ii. Web Fonts

6. i. border-radius
ii. RGBA colors

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. 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. Border-radius či RGBA ale
některé prohlížeče neumí.
A klient to nutně vyžaduje.

10. Introducing Modernizr

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. .borderradius div p {
/* properties for browsers that
support border-radius */
}
.no-borderradius div p {
/* optional fallback properties
for browsers that don't */
}

13. Stránky nemusí vypadat
ve všech prohlížečích
stejně. Musí ale fungovat.

14. ii. Web Fonts

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

16. <blockquote>
Mohu používat font X na
svých webových
stránkách?
Anonymní designér

17. i. Typeface.js
ii. Cufón
iii.sIFR
iv.FLIR
v. Image replacement

18. i. Obcházíme prohlížeče
ii. Použitelné pouze pro
nadpisy a krátké texty

19. <blockquote>
Web Fonts - The
Next Big Thing
Håkon 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 prohlížečích
ii. Licencování

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. Přidejme špetku černé magie
díky skvělé práci Jonathana Snooka a Paula Irishe.

26. IE podporuje @font-face
od verze 4!

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

28. @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+

29. <blockquote>
Chrome needs to
support @font-face
immediately.
Jeffrey Zeldman, Twitter, 25. září 2009

30. Povol @font-face v Google Chrome:
−−enable-remote-fonts

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

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

33. V září 2009 by tak vidělo fonty s @font-face
80% uživatelů
Ostatní uvidí standardní fallback web-safe font

34. Performance issues
Flash Of Unstyled Text

35. i. Gzip
ii. Cache
iii.Lazy Load

36. Pár dalších tipů
paulirish.com/2009/fighting-the-font-face-fout/
www.phpied.com/gzip-your-font-face-files/

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

38. Stažení fontu je pak tak
snadné, jako stažení obrázku.

39. You wouldn’t steel a font!

40. Microsoft to věděl v roce 1997.
Vymyslel proto Embeded OpenType.

41. i. Kompaktní forma OTF
ii. Subsetting
iii. Encryption (trusted roots)

42. V roce 2007 bylo navrženo,
aby byl formát EOT
zařazen do specifikace.
W3C odmítlo.

43. EOT ještě jednou
Znovu podáno v roce 2008. Specifikace v
současnosti koncovku .eot zná.

44. WOFF File Format

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

46. Jaké fonty tedy můžeme
používat?

47. See EULA.

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

49. i. www.fontsquirrel.com/fontface
ii. Spyrestudio.com
iii. kernest.com
iv. webfonts.info
Volně dostupné fonty

50. Někdo vidí problém, jiný
příležitost.

51. Typekit, Typotheque,
Fontdeck, Kernest

52. Kam dál? Na Google.
nebo můj blog withoutanswers.com

53. <blockquote>
Here's a question. Are sIFR
and Cufon still relevant now
we have @font-face solutions?
Andy Clarke, Twitter, 6. září 2009

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

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