hon za fonty na webu
DESCRIPTION
My talk given at Web Expo 2009 web design conference. It's mostly about Web Fonts.TRANSCRIPT
![Page 1: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/1.jpg)
Hon za fonty na webu
Jan Sládek
s krátkým vydechnutím u CSS 3 a JS
![Page 2: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/2.jpg)
Jsme dva roky za světem?
![Page 3: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/3.jpg)
CSS 3
![Page 4: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/4.jpg)
Obří specifikace
41 modulů.Začněme je využívat již dnes.
![Page 5: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/5.jpg)
i. Drobné triky pro každý den
ii. Web Fonts
![Page 6: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/6.jpg)
i. border-radius
ii. RGBA colors
![Page 7: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/7.jpg)
<div style="background-color: #fff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 2px solid #000;padding: 10px;">WEBEXPO 2009</div>
WEBEXPO 2009
![Page 8: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/8.jpg)
<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>
WEBEXPO 2009
![Page 9: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/9.jpg)
Border-radius či RGBA ale některé prohlížeče neumí. A klient to nutně vyžaduje.
![Page 10: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/10.jpg)
Introducing Modernizr
![Page 11: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/11.jpg)
<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
![Page 12: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/12.jpg)
.borderradius div p { /* properties for browsers that support border-radius */}.no-borderradius div p { /* optional fallback properties for browsers that don't */}
![Page 13: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/13.jpg)
Stránky nemusí vypadat ve všech prohlížečích stejně. Musí ale fungovat.
![Page 14: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/14.jpg)
ii. Web Fonts
![Page 15: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/15.jpg)
<blockquote>
Typografie = UITexty = UIJan Korbel, WebExpo, 16. 10. 2009
![Page 16: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/16.jpg)
<blockquote>
Mohu používat font X na svých webových stránkách?Anonymní designér
![Page 17: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/17.jpg)
i. Typeface.js
ii. Cufón
iii.sIFR
iv.FLIR
v. Image replacement
![Page 18: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/18.jpg)
i. Obcházíme prohlížeče
ii. Použitelné pouze pro
nadpisy a krátké texty
![Page 19: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/19.jpg)
<blockquote>
Web Fonts - The Next Big Thing Håkon Wium Lie, A List Apart, srpen 2007
![Page 20: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/20.jpg)
@font-face
![Page 21: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/21.jpg)
@font-face { font-family:'Graublau Web'; src: url(http://site/GraublauWeb.ttf);}
p { font-family:'Graublau Web', serif; }
![Page 22: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/22.jpg)
i. Podpora v prohlížečích
ii. Licencování
![Page 23: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/23.jpg)
@font-face { font-family: 'Graublau Web'; src: url(http://site/GraublauWeb.ttf);}
p { font-family: 'Graublau Web', serif; }
3.5+ 3.1+ 10
![Page 24: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/24.jpg)
Přidejme špetku černé magiedíky skvělé práci Jonathana Snooka a Paula Irishe.
![Page 25: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/25.jpg)
![Page 26: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/26.jpg)
IE podporuje @font-face od verze 4!
![Page 27: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/27.jpg)
✓ ttf2eot: code.google.com/p/ttf2eot
✓ OTF je nutné zkonvertovat do TTF
nebo použij:
✓ FontSquirell (beta): www.fontsquirrel.com/
fontface/generator
Ale pouze ve formátu EOT
![Page 28: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/28.jpg)
@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+
![Page 29: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/29.jpg)
<blockquote>
Chrome needs to support @font-face immediately.Jeffrey Zeldman, Twitter, 25. září 2009
![Page 30: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/30.jpg)
−−enable-remote-fonts
Povol @font-face v Google Chrome:
![Page 31: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/31.jpg)
✓ xmlgraphics.apache.org/batik/tools/font-converter.html
Zachrání nás SVG
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
![Page 32: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/32.jpg)
@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
![Page 33: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/33.jpg)
V září 2009 by tak vidělo fonty s @font-face
80% uživatelůOstatní uvidí standardní fallback web-safe font
![Page 34: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/34.jpg)
Performance issues
Flash Of Unstyled Text
![Page 35: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/35.jpg)
i. Gzip
ii. Cache
iii.Lazy Load
![Page 36: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/36.jpg)
Pár dalších tipůpaulirish.com/2009/fighting-the-font-face-fout/
www.phpied.com/gzip-your-font-face-files/
![Page 37: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/37.jpg)
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.
![Page 38: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/38.jpg)
Stažení fontu je pak tak snadné, jako stažení obrázku.
![Page 39: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/39.jpg)
You wouldn’t steel a font!
![Page 40: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/40.jpg)
Microsoft to věděl v roce 1997. Vymyslel proto Embeded OpenType.
![Page 41: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/41.jpg)
i. Kompaktní forma OTF
ii. Subsetting
iii.Encryption (trusted roots)
![Page 42: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/42.jpg)
V roce 2007 bylo navrženo, aby byl formát EOT zařazen do specifikace.
W3C odmítlo.
![Page 43: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/43.jpg)
EOT ještě jednouZnovu podáno v roce 2008. Specifikace v současnosti koncovku .eot zná.
![Page 44: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/44.jpg)
WOFF File Format
![Page 45: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/45.jpg)
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.
![Page 46: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/46.jpg)
Jaké fonty tedy můžeme používat?
![Page 47: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/47.jpg)
See EULA.
![Page 48: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/48.jpg)
<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
![Page 49: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/49.jpg)
Volně dostupné fonty
i. www.fontsquirrel.com/fontface
ii. Spyrestudio.com
iii. kernest.com
iv. webfonts.info
![Page 50: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/50.jpg)
Někdo vidí problém, jiný příležitost.
![Page 51: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/51.jpg)
Typekit, Typotheque, Fontdeck, Kernest
![Page 52: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/52.jpg)
Kam dál? Na Google.nebo můj blog withoutanswers.com
![Page 53: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/53.jpg)
<blockquote>
Here's a question. Are sIFR and Cufon still relevant now we have @font-face solutions?
Andy Clarke, Twitter, 6. září 2009
![Page 54: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/54.jpg)
<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
![Page 55: Hon za fonty na webu](https://reader033.vdocuments.net/reader033/viewer/2022042509/54c82c8a4a7959e93d8b45a9/html5/thumbnails/55.jpg)
Díky za pozornost.
Jan Sládek
withoutanswers.com [email protected]
clevis.cztwitter.com/zahon
Clevis s.r.o.