Načítanie štýlov písma

Externé fonty

Fonty, alebo taktiež nazývané štýly písma, je možné načítať z externých zdrojov. Najznámejším externým zdrojom je Google Fonts.

Po navštívení stránky je možné vidieť zoznam dostupných fontov podľa navoleného filtra vpravo. Každý font je vyjadrený aj náhľadom a je možné si priamo vyskúšať svôj vvlastný text, aby mal človek predstavu.

Po zvolení si konkrétneho štýlu písma (môže ich byť aj viac), je možnosť pomocou vygenerovaného HTML kódu

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Condensed&amp;subset=latin-ext" rel="stylesheet">

, ktorý si vložíme do halvičky stránky (medyi značky <head></head>) implementovať nový typ písma, ktorý nie je štandardne implementovaný vo webových prehliadačoch.

Na to, aby sme nový typ písma aj aplikovali na konkrétny element, prípade celú stránku, musíme použiť vygenerovaný CSS kód,

font-family: 'Open Sans', sans-serif;
font-family: 'Roboto Condensed', sans-serif;

a to napríklad nasledovne:

body{
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Roboto Condensed', sans-serif;
}

Týmto kódom sme docielili to, že na celej stránke sa používa písmo „Open Sans“ a na nadpisoch sa používa písmo „Roboto Condesed“.

Interné fonty

Medzi internými a externými fontami je rozdiel v implementácii. Zatiaľčo pri externých sa musíme spoliehať na dostupnosť služby, ktorú obsluhuje nie kto iný a na ktorú nemáme žiaden dosah, v prípade internej implementácii sa nemusíme obávať výpadkov externých zdrojov, iba tých vlastných.

V tomto prípade použijeme jednu z dostupných služieb pre stiahnutie voľne dostupných písiem alebo v prípade potreby si štýl písma zakúppime z platenej služby. Pre názornú ukážku použijeme opäť Google Fonts. Narozdiel od predchádzajúceho návodu si teraz písmo k sebe stiahneme.

Po stiahnutí si zazipovaný archív rozbalíme do svoôjho projektu. Odporúča sa vytvoriť si zvlášť zložku „fonts“.

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); 
}

Nasledujúcim kódom si vieme do CSS implementovať nové písmo „Open Sans“, ktoré je predvoleného štýlu a má predvolenú hrúbku. Načítame ho na yáklade ydrojového súboru OpenSans-Regular.ttf, ktorý sme si stiahli.

Pre definovanie ďalších nastavení rovnakého písma použijeme ďalšie implementácie nasledovne:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); 
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/Open_Sans/OpenSans-Light.ttf") format("truetype"); 
}

Vďaka načítaniu ďalšieho súboru zo série vieme docieliť, že použijeme naše nové písmo, ktoré bude tenšie ako to predvolené. Aby sme tieto zmeny aplikovali, stačí CSS vlastnosť použiť nasledovne:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); 
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/Open_Sans/OpenSans-Light.ttf") format("truetype"); 
}

body{
    font-family: 'Open Sans';
}

.slim{
    font-weight: 300;
}
  • Písmo sme si načítali pre predvolenú šírku a pre tenšiu možnosť
  • Na celú stránku sme aplikovali naše nové písmo
  • Pre každý element triedy „slim“ sme aplikovali zúžený typ písma pomocou CSS dvojice „font-weight: 300“, nakoľko predvolená hodnota je 400 a samotná CSS vlastnosť font-weight môže nadobúdať
    • číselné hodnoty:
      • 100
      • 200
      • 300
      • 400
      • 500
      • 600
      • 700
      • 800
      • 900
    • alebo textové hodnoty:
      • normal (zodpovedá hodnote 400)
      • bold (zodpovedá hodnote 600)
      • bolder (zodpovedá hodnote 800)
      • lighter (zodpovedá hodnote 300)