CSS font family

Ukázali jsme si, jak změnit
barvu pozadí a barvu textu.

Ale s textem můžeme
v CSS dokázat mnohem víc.

Pro začátek zkusíme změnit font.

Co je to font? Nejspíš už nějaký font
znáte, ale zatím jste možná neslyšeli,

jak se mu říká.

Font je styl písma, tedy písmenek,
ze kterých se skládají slova.

Někdy písmenka mohou mít
kudrlinky, jindy jsou tlustá,

a někdy vypadají, jako by je
někdo napsal psacím perem.

Bude jednodušší, když si rovnou
ukážeme, jak takový font změnit.

Půjdu do CSS pravidla ,
které vybírá všechny odstavce,

a přidám vlastnost 'font-family'.

font-family sans pomlčka serif.

Viděli jste, jak se písmenka změnila?

Vypadají teď jednodušší.

Teď zkusím vrátit hodnotu
'font-family' zpátky na 'serif'.

Všímáte si, že písmenka
vypadají teď o něco složitější?

'serif', neboli patkový font, má u písmenek
takové malé nožičky - patky.

Když takto řekneme prohlížeči, aby
použil 'serif' font, použije základní

patkové písmo v počítači. Což je
většinou font 'Times New Roman'.

Mně se spíš ale líbí 'sans-serif',
tak ho tam teď vrátím.

Slovo 'sans' pochází z latiny
a znamená 'bez'.

Takže font sans-serif je ten,
který je bez patek u písmenek.

A proto u něj písmena vypadají jednodušší.

Když řekneme prohlížeči,
aby použil font 'sans-serif',

použije základní bezpatkový font v počítači,
což je obvykle 'Arial' nebo 'Helvetica'.

Ale to nejdůležitější: prohlížeč
vybere základní font počítače,

na kterém je návštěvník stránky, nikoliv autor.

Takže právě teď možná každý vidíme
trochu jiný bezpatkový font,

Pokud váš počítač má jiný
základní font než můj.

Někdy to je v pořádku,
ale jindy bychom chtěli,

aby návštěvníci viděli
přesně stejný font jako my.

V takovém případě můžu uvést přesný
název fontu, například Helvetica.

A to bude fungovat pouze tehdy, pokud
já i vy máme font Helvetica na našem počítači.

Ale ne všechny počítače
mají všechny fonty k dispozici,

a v takovém případě prohlížeč
bude tuto vlastnost úplně ignorovat.

Naštěstí, v CSS můžeme
uvést záložní font pro případ,

kdy původní font na počítači neexistuje.

Stačí za 'Helvetica' přidat čárku
a znovu uvést 'sans-serif'.

Teď když počítač nenajde Helveticu,
prostě použije základní 'sans-serif',

neboli bezpatkový font.

Obecně kdykoliv použijeme název
konkrétního fontu, jako je Helvetica,

tak bychom měli uvést
i záložní rodinu fontů.

Kromě 'serif' a 'sans-serif' fontů
je tu ještě několik rodin fontů,

které můžeme použít.

Kdybychom chtěli, aby text naší písničky vypadal
jako napsaný rukou, použijeme 'font-family: cursive'.

Kdybychom chtěli použít něco extra, můžeme
vyzkoušet rodinu fontů 'fantasy'.

Nebo pokud chceme, aby text
vypadal jako napsaný na psacím stroji,

můžeme použít rodinu fontů 'monospace'.

Fonty 'monospace' mají pevnou šířku,
což znamená,

že všechna písmena jsou
přesně stejně široká.

A ve skutečnosti jsme se už s nimi
tady na Khan Academy potkali,

protože ve všech editorech kódu
tyto 'monospace' fonty používáme.

Chceme totiž, aby byl kód hezky zarovnaný
bez ohledu na to, jaká

písmena přesně použijeme.

Teď, když už umíte změnit font,
používejte tuto schopnost rozvážně.

Pokud chcete, aby vaše stránka vypadala
dobře, omezte se jen na pár fontů,

a vyberte takové, které jdou dobře k sobě.

Pokud ale chcete mít ošklivou stránku,
nikdo vám v tom nemůže zabránit. :-)