Hon za fonty na webu

transcript

Jan Sládek

s krátkým vydechnutím u CSS 3 a JS

Jsme dva roky za světem?

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

<div style="background-color: #fff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 2px solid #000;padding: 10px;">WEBEXPO 2009</div>

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>

WEBEXPO 2009

Border-radius či RGBA ale některé prohlížeče neumí. A klient to nutně vyžaduje.

Introducing Modernizr

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

.borderradius div p { /* properties for browsers that support border-radius */}.no-borderradius div p { /* optional fallback properties for browsers that don't */}

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

ii. Web Fonts

Typografie = UITexty = UIJan Korbel, WebExpo, 16. 10. 2009

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

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', serif; }

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', serif; }

3.5+ 3.1+ 10

Přidejme špetku černé magiedíky skvělé práci Jonathana Snooka a Paula Irishe.

IE podporuje @font-face od verze 4!

✓ 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

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

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

−−enable-remote-fonts

Povol @font-face v Google Chrome:

✓ 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

@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

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 fonty ve své čisté podobě. Tedy TTF a OTF.

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ě jednouZnovu 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 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.

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

See EULA.

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

Volně dostupné fonty

i. www.fontsquirrel.com/fontface

ii. Spyrestudio.com

iii. kernest.com

iv. webfonts.info

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

Typekit, Typotheque, Fontdeck, Kernest

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

Here's a question. Are sIFR and Cufon still relevant now we have @font-face solutions?

Andy Clarke, Twitter, 6. září 2009

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

Díky za pozornost.

Jan Sládek

jan@withoutanswers.com

withoutanswers.com jan.sladek@clevis.cz

clevis.cztwitter.com/zahon

Clevis s.r.o.

Hon za fonty na webu

Technology