WEBVTT

00:00:00.211 --> 00:00:05.221
Ukázali jsme si, jak změnit
barvu pozadí a barvu textu.

00:00:05.303 --> 00:00:08.682
Ale s textem můžeme
v CSS dokázat mnohem víc.

00:00:09.509 --> 00:00:12.110
Pro začátek zkusíme změnit font.

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

00:00:15.925 --> 00:00:17.243
jak se mu říká.

00:00:17.243 --> 00:00:19.802
Font je styl písma, tedy písmenek,
ze kterých se skládají slova.

00:00:19.802 --> 00:00:22.996
Někdy písmenka mohou mít 
kudrlinky, jindy jsou tlustá,

00:00:22.996 --> 00:00:25.884
a někdy vypadají, jako by je
někdo napsal psacím perem.

00:00:25.884 --> 00:00:30.266
Bude jednodušší, když si rovnou
ukážeme, jak takový font změnit.

00:00:30.663 --> 00:00:35.441
Půjdu do CSS pravidla ,
které vybírá všechny odstavce,

00:00:35.729 --> 00:00:38.623
a přidám vlastnost 'font-family'.

00:00:38.681 --> 00:00:41.621
font-family sans pomlčka serif.

00:00:41.739 --> 00:00:44.115
Viděli jste, jak se písmenka změnila?

00:00:44.115 --> 00:00:47.126
Vypadají teď jednodušší.

00:00:47.126 --> 00:00:52.183
Teď zkusím vrátit hodnotu
'font-family' zpátky na 'serif'.

00:00:52.283 --> 00:00:55.902
Všímáte si, že písmenka
vypadají teď o něco složitější?

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

00:00:59.979 --> 00:01:04.269
Když takto řekneme prohlížeči, aby
použil 'serif' font, použije základní

00:01:04.269 --> 00:01:08.162
patkové písmo v počítači. Což je
většinou font 'Times New Roman'.

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

00:01:14.246 --> 00:01:17.806
Slovo 'sans' pochází z latiny
a znamená 'bez'.

00:01:17.996 --> 00:01:21.810
Takže font sans-serif je ten,
který je bez patek u písmenek.

00:01:21.810 --> 00:01:24.177
A proto u něj písmena vypadají jednodušší.

00:01:24.177 --> 00:01:27.936
Když řekneme prohlížeči,
aby použil font 'sans-serif',

00:01:27.936 --> 00:01:33.136
použije základní bezpatkový font v počítači,
což je obvykle 'Arial' nebo 'Helvetica'.

00:01:33.136 --> 00:01:37.710
Ale to nejdůležitější: prohlížeč
vybere základní font počítače,

00:01:37.710 --> 00:01:41.216
na kterém je návštěvník stránky, nikoliv autor.

00:01:41.553 --> 00:01:45.257
Takže právě teď možná každý vidíme
trochu jiný bezpatkový font,

00:01:45.317 --> 00:01:48.272
Pokud váš počítač má jiný
základní font než můj.

00:01:48.272 --> 00:01:51.969
Někdy to je v pořádku,
ale jindy bychom chtěli,

00:01:51.969 --> 00:01:56.263
aby návštěvníci viděli
přesně stejný font jako my.

00:01:56.701 --> 00:02:02.722
V takovém případě můžu uvést přesný
název fontu, například Helvetica.

00:02:03.150 --> 00:02:08.418
A to bude fungovat pouze tehdy, pokud
já i vy máme font Helvetica na našem počítači.

00:02:08.436 --> 00:02:12.641
Ale ne všechny počítače
mají všechny fonty k dispozici,

00:02:12.708 --> 00:02:14.746
a v takovém případě prohlížeč
bude tuto vlastnost úplně ignorovat.

00:02:14.746 --> 00:02:20.029
Naštěstí, v CSS můžeme
uvést záložní font pro případ,

00:02:20.058 --> 00:02:22.979
kdy původní font na počítači neexistuje.

00:02:22.979 --> 00:02:28.001
Stačí za 'Helvetica' přidat čárku
a znovu uvést 'sans-serif'.

00:02:28.443 --> 00:02:32.737
Teď když počítač nenajde Helveticu,
prostě použije základní 'sans-serif',

00:02:32.737 --> 00:02:35.070
neboli bezpatkový font.

00:02:35.070 --> 00:02:39.300
Obecně kdykoliv použijeme název
konkrétního fontu, jako je Helvetica,

00:02:39.324 --> 00:02:44.172
tak bychom měli uvést
i záložní rodinu fontů.

00:02:44.447 --> 00:02:48.349
Kromě 'serif' a 'sans-serif' fontů
je tu ještě několik rodin fontů,

00:02:48.349 --> 00:02:49.995
které můžeme použít.

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

00:02:57.794 --> 00:03:03.874
Kdybychom chtěli použít něco extra, můžeme
vyzkoušet rodinu fontů 'fantasy'.

00:03:04.944 --> 00:03:08.305
Nebo pokud chceme, aby text
vypadal jako napsaný na psacím stroji,

00:03:08.305 --> 00:03:11.124
můžeme použít rodinu fontů 'monospace'.

00:03:11.204 --> 00:03:14.230
Fonty 'monospace' mají pevnou šířku,
což znamená,

00:03:14.230 --> 00:03:16.477
že všechna písmena jsou
přesně stejně široká.

00:03:16.477 --> 00:03:20.051
A ve skutečnosti jsme se už s nimi
tady na Khan Academy potkali,

00:03:20.258 --> 00:03:23.328
protože ve všech editorech kódu
tyto 'monospace' fonty používáme.

00:03:23.996 --> 00:03:27.077
Chceme totiž, aby byl kód hezky zarovnaný
bez ohledu na to, jaká

00:03:27.216 --> 00:03:29.381
písmena přesně použijeme.

00:03:29.480 --> 00:03:33.310
Teď, když už umíte změnit font,
používejte tuto schopnost rozvážně.

00:03:33.450 --> 00:03:37.790
Pokud chcete, aby vaše stránka vypadala
dobře, omezte se jen na pár fontů,

00:03:37.790 --> 00:03:40.910
a vyberte takové, které jdou dobře k sobě.

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