Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Jak pracovat s fonty na
front-endu
Petr Grochál
petr.grochal@superkoderi.cz
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/...
Současnost
Web fonts (EOT, TTF, WOFF, SVG)
● EOT - IE8 a nižší
● TTF - Safari, Android, iOS
● WOFF - všechny moderní prohl...
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ě...
Jak správně zapsat v CSS?
● různé řezy - kombinace font-style a font-weight
● co znamenají hashtagy v url?
zdroj: https://...
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...
Licence
● dát si pozor na to, pod jakou je font licencí
● za vygenerovaný font ručí developer
● možnost využít cloudových ...
Tipy a triky
● font z Google fonts špatně vykresluje některé znaky -
stáhnout a vygenerovat
● české znaky - přidat languag...
Tipy a triky
● Pokud se fonty v Chrome vykreslují špatně, zkuste
použít -webkit-font-smoothing: antialiased;
● Ve Firebugu...
Užitečné odkazy
● http://www.cssfontstack.com - kompletní kolekce web safe fontů
● http://www.fontsquirrel.com - kolekce f...
direction: rtl - pozor na záporné pozicování doleva :), resetovat letter-spacing
Děkuji za pozornost
Petr Grochál
petr.grochal@superkoderi.cz
www.superkoderi.cz
#frontendisti, 9. 4. 2015
Jak pracovat s fonty na front endu
Jak pracovat s fonty na front endu
Upcoming SlideShare
Loading in …5
×

Jak pracovat s fonty na front endu

1,066 views

Published on

Přednáška Petra Grochála o použití písma na webu

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Jak pracovat s fonty na front endu

  1. 1. Jak pracovat s fonty na front-endu Petr Grochál petr.grochal@superkoderi.cz www.superkoderi.cz #frontendisti, 9. 4. 2015
  2. 2. 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
  3. 3. 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
  4. 4. Budoucnost WOFF 2.0 ● nová generace web fontů ● větší komprese ● menší datová náročnost
  5. 5. Jaká je podpora v prohlížečích? @font-face
  6. 6. Jaká je podpora v prohlížečích? WOFF
  7. 7. Jaká je podpora v prohlížečích? WOFF 2.0 - zatím jen “Blink”
  8. 8. Ke najít webfonty? Self-hosted ● chcete mít kontrolu nad soubory ● Font Squirrel, Font Spring
  9. 9. 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
  10. 10. 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/
  11. 11. Jak správně zapsat v CSS? Jen WOFF a WOFF 2.0 zdroj: https://css-tricks.com/snippets/css/using-font-face/
  12. 12. Font Squirrel Webfont Generator
  13. 13. Font Squirrel Webfont Generator
  14. 14. Typekit
  15. 15. Typekit
  16. 16. 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/
  17. 17. 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
  18. 18. 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
  19. 19. 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ích body { -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
  20. 20. 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/
  21. 21. direction: rtl - pozor na záporné pozicování doleva :), resetovat letter-spacing
  22. 22. Děkuji za pozornost Petr Grochál petr.grochal@superkoderi.cz www.superkoderi.cz #frontendisti, 9. 4. 2015

×