Embed Size (px)
Citation preview
Jak pracovat s fonty na front-endu
Petr Grochál
www.superkoderi.cz
#frontendisti, 9. 4. 2015
Trocha historie
1. Web-safe fonts○ Arial, Verdana, Helvetica, Times New Roman, ...
2. Nahrazování fontů○ Cufon - Canvas/VML○ Sifr - Flash○ Flir - embedované obrázky
Současnost
Web fonts (EOT, TTF, WOFF, SVG)● EOT - IE8 a nižší
● TTF - Safari, Android, iOS
● WOFF - všechny moderní prohlížeče
● SVG - Safari na iOS 4.1 a nižším
Budoucnost
WOFF 2.0● nová generace web fontů
● větší komprese
● menší datová náročnost
Jaká je podpora v prohlížečích?
@font-face
Jaká je podpora v prohlížečích?
WOFF
Jaká je podpora v prohlížečích?
WOFF 2.0 - zatím jen “Blink”
Ke najít webfonty?
Self-hosted● chcete mít kontrolu nad soubory
● Font Squirrel, Font Spring
Ke najít webfonty?
Cloud-hosted● nemůžete nebo nechcete nahrávat soubory na server
● jednoduchá správa
● nemusíte se zatěžovat se zápisem @font-face
● Google Fonts, Fonts.com, Typekit, Cloud.typography, ...
Custom fonty● zákazník občas dodá svůj vlastní font
Jak správně zapsat v CSS?
● různé řezy - kombinace font-style a font-weight
● co znamenají hashtagy v url?
zdroj: https://css-tricks.com/snippets/css/using-font-face/
Jak správně zapsat v CSS?
Jen WOFF a WOFF 2.0
zdroj: https://css-tricks.com/snippets/css/using-font-face/
Font Squirrel Webfont Generator
Font Squirrel Webfont Generator
Typekit
Typekit
Ikonkové fonty
● vektor
● jednoduchá změna barvy
● již hotové ikonkové sety na Icomoon, Fontastic, …
● možnost vygenerování vlastního fontu z SVG
http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/
Licence
● dát si pozor na to, pod jakou je font licencí● za vygenerovaný font ručí developer● možnost využít cloudových řešení jako
Typekit nebo Fonts.com
Tipy a triky
● font z Google fonts špatně vykresluje některé znaky - stáhnout a vygenerovat
● české znaky - přidat language subset s českými znaky, na Google fonts checkbox “Latin Extended”
● Příliš mnoho fontů - větší datová náročnost, déle se stahují
● Pro mobilní zařízení vyzkoušejte condensed verzi fontu
Tipy a triky
● Pokud se fonty v Chrome vykreslují špatně, zkuste použít -webkit-font-smoothing: antialiased;
● Ve Firebugu se vám vysvítí, který font se aktuálně používá
● zamezení zvětšování fontu na některých mobilních zařízeníchbody { -webkit-text-size-adjust: 100%; }
● velikost mřížky u ikonkového fontu nastavte podle největší ikony a jednotlivé ikony vkládejte v té velikosti jako jsou v designu
Užitečné odkazy● http://www.cssfontstack.com - kompletní kolekce web safe fontů
● http://www.fontsquirrel.com - kolekce free webfontů, webfont generátor
● http://www.google.com/fonts
● http://www.typekit.com
● http://www.fonts.com
● http://www.456bereastreet.
com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabl
ing_user_zoom/
direction: rtl - pozor na záporné pozicování doleva :), resetovat letter-spacing
Děkuji za pozornost
Petr Grochál
www.superkoderi.cz
#frontendisti, 9. 4. 2015
