Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Jak pracovat s fonty na front endu

1.071 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×