Mgr. Vlastislav Kučera.  připojení fontů z webu (Google fonts)

Prezentace na téma: "Mgr. Vlastislav Kučera.  připojení fontů z webu (Google fonts)"— Transkript prezentace:

1 Mgr. Vlastislav Kučera

2  @font-face  připojení fontů z webu (Google fonts)

3  definujeme název písma  cesta k souboru s písmem  př.: ◦ @font-face{ font-family: nazev-pisma; src: url(cesta-k-souboru) format(format-souboru) }  přiřazení k prvku: ◦.prvek{ font-family: nazev-pisma }

4  několik typů: ◦ woff  Web Open Font Forma  dnes nejčastější formát  podpora IE9+ ◦ ttf/otf  TrueType/OpenType  podpora: všechny moderní prohlížeče, IE9+ ◦ svg  fonty definované ve vektorovém formátu SVG  staré verze iOS Safari ◦ eot  Embedded OpenType font  pro IE8- (IE4 – IE8)

5  http://caniuse.com/#feat=fontface http://caniuse.com/#feat=fontface  EOT: http://caniuse.com/#feat=eothttp://caniuse.com/#feat=eot  WOFF: http://caniuse.com/#feat=woffhttp://caniuse.com/#feat=woff  SVG: http://caniuse.com/#feat=svg-fontshttp://caniuse.com/#feat=svg-fonts  TTF/OTF: http://caniuse.com/#feat=ttfhttp://caniuse.com/#feat=ttf  WOFF 2.0: http://caniuse.com/#feat=woff2http://caniuse.com/#feat=woff2

6  http://www.fontsquirrel.com http://www.fontsquirrel.com  i české  i fonty ve více formátech

7  chceme připojit písmo PECITA, které nalezneme na http://www.fontsquirrel.com/fonts/Pecita?q% 5Bterm%5D=PECITA&q%5Bsearch_check%5D= Y http://www.fontsquirrel.com/fonts/Pecita?q% 5Bterm%5D=PECITA&q%5Bsearch_check%5D= Y  stáhneme požadované formáty, rozbalíme do složky /fonts (/pismo) webového sídla

8 @font-face{ font-family: Pecita; src: url('../pismo/pecita.eot'); src: url('../pismo/pecita.eot?#iefix'), url('../pismo/pecita.woff') format('woff'), url('../pismo/pecita.ttf') format('truetype'), url('../pismo/pecita.svg') format('svg'); }

9  http://www.google.com/fonts http://www.google.com/fonts  připojení: ◦ v HTML souboru: ◦ v CSS předpisu: @import url(http://fonts.googleapis.com/css?family=Open+ Sans&subset=latin,latin-ext);http://fonts.googleapis.com/css?family=Open+ Sans&subset=latin,latin-ext  odkazování na font:.prvek{font-family: ‘Open Sans’;}