0:00:00.211,0:00:05.221
Ви вже бачили, як можна змінити колір[br]тексту та фону на сторінці.

0:00:05.303,0:00:08.682
Але ви можете зробити значно[br]більше з текстом у CSS.

0:00:09.509,0:00:11.632
Спочатку, змінімо шрифт.

0:00:12.577,0:00:15.925
Що таке шрифт? Ви точно знаєте,[br]що це, але, можливо,

0:00:15.925,0:00:17.284
ви не знали, як це називається.

0:00:17.284,0:00:19.857
Це стиль літер, які формують слова:

0:00:19.857,0:00:23.196
чи є у них певні оздоблення,[br]наскільки тонкими є літери,

0:00:23.196,0:00:25.903
чи, можливо, вони наче написані [br]чорнильною ручкою.

0:00:25.903,0:00:30.266
Буде простіше, якщо я почну діяти[br]і зміню шрифти на цій сторінці.

0:00:30.663,0:00:35.441
Я перейду до правила CSS "p", яке[br]вибирає усі параграфи,

0:00:35.729,0:00:37.957
і додам тут властивість "font-family"[br](сімейства шрифтів).

0:00:38.279,0:00:41.279
font-family: sans-serif.

0:00:41.739,0:00:43.829
Чи ви бачите, як змінились літери?

0:00:44.115,0:00:45.805
Зараз вони мають [br]трохи простіший вигляд.

0:00:47.293,0:00:52.183
Тепер я знову зміню "font-family",[br]вказавши шрифт "serif".

0:00:52.283,0:00:55.902
Ви побачили, що літери[br]виглядають більш організовано?

0:00:55.902,0:00:59.859
Шрифт "serif" — це будь-який шрифт, який[br]має маленькі "ніжки" на кінцях літер.

0:00:59.979,0:01:04.269
Коли ми кажемо браузеру використати шрифт[br]"serif", він використає шрифт "serif",

0:01:04.269,0:01:07.554
який є за замовчуванням на цьому комп'ютері. [br]Переважно це шрифт "Times New Roman".

0:01:07.554,0:01:10.554
Однак мені не дуже подобається,[br]цей шрифт, тому зараз

0:01:10.554,0:01:13.114
я поверну шрифт "sans-serif".

0:01:14.246,0:01:17.806
Слово "sans" походить з латинської мови[br]і означає "без".

0:01:17.996,0:01:21.810
Тому шрифт "sans-serif" — це той, який[br]не має "ніжок" на літерах.

0:01:22.101,0:01:23.722
Ось чому літери мають простіший вигляд.

0:01:24.177,0:01:27.936
Коли ми кажемо браузеру використати[br]шрифт "sans-serif", він використовує

0:01:27.936,0:01:33.136
шрифт "sans-serif", який є за замовчуванням,[br]і це переважно "Arial" або "Helvetica".

0:01:33.136,0:01:37.710
Але тут є важлива деталь: він вибере [br]шрифт, який встановлений

0:01:37.710,0:01:41.216
за замовчуванням на комп'ютері глядача,[br]а не автора.

0:01:41.553,0:01:45.257
Тому дуже ймовірно, що ми дивитимемось[br]на різні шрифти, якщо

0:01:45.317,0:01:47.595
ваш комп'ютер має інші значення[br]за замовчуванням, ніж мій.

0:01:47.595,0:01:52.530
Інколи мене це влаштовує, але бувають випадки,[br]коли мені дуже потрібно, щоб глядач

0:01:52.530,0:01:56.263
сторінки бачив її точно такою ж,[br]як бачу її я.

0:01:56.701,0:02:01.981
В такому разі я можу визначити точне[br]ім'я шрифту, наприклад, Helvetica.

0:02:03.150,0:02:07.938
Таке спрацює, якщо і ви, і я матимемо[br]шрифт Helvetica на наших комп'ютерах.

0:02:08.436,0:02:12.641
Але не всі комп'ютери мають однакові[br]шрифти, і в такому випадку комп'ютер

0:02:12.708,0:02:14.449
повністю проігнорує цю вказівку.

0:02:14.746,0:02:20.029
На щастя, CSS дозволяє нам визначити[br]альтернативний варіант шрифту, на випадок,

0:02:20.058,0:02:22.303
якщо певного шрифту не буде на комп'ютері.

0:02:22.979,0:02:28.001
Ви ставите кому після "Helvetica" і [br]пишете "sans-serif".

0:02:28.443,0:02:32.737
Тепер, якщо комп'ютер шукатиме шрифт[br]"Helvetica" і не знайде його,

0:02:32.737,0:02:34.438
він використає шрифт "sans-serif"[br]за замовчуванням.

0:02:35.070,0:02:39.300
Загалом, щоразу, як ви визначатимете[br]конкретне ім'я шрифту, як Helvetica,

0:02:39.324,0:02:43.515
ви маєте також визначати[br]альтернативний варіант шрифту.

0:02:43.727,0:02:47.629
Окрім "serif" і "sans-serif" існує[br]декілька інших стандартних

0:02:47.629,0:02:49.877
шрифтів, які ми можемо[br]використовувати.

0:02:50.100,0:02:55.274
Якщо ми хочемо, щоб слова були наче [br]написані від руки, ми обираємо

0:02:55.274,0:02:58.274
"font-family: cursive".

0:02:58.274,0:03:03.874
Якщо ми хочемо, щоб вони виглядали[br]веселіше, ми можемо спробувати шрифт "fantasy".

0:03:04.944,0:03:08.305
А якщо ми хочемо, щоб вони були[br]наче надруковані на друкарській машинці,

0:03:08.305,0:03:11.124
ми можемо використати шрифт[br]"monospace".

0:03:11.204,0:03:14.606
Цей шрифт має фіксовану ширину, що[br]означає, що всі літери

0:03:14.606,0:03:16.306
будуть однакові по ширині.

0:03:16.477,0:03:20.051
І насправді, ви бачили багато шрифтів[br]"monospace" тут, на сайті KhanAcademy,

0:03:20.258,0:03:23.328
тому що ми завжди використовуємо[br]такі шрифти для редакторів коду.

0:03:23.996,0:03:27.077
Оскільки ми хочемо, щоб весь код[br]лежав на одній прямій, незалежно

0:03:27.216,0:03:28.511
від літер у слові.

0:03:29.480,0:03:33.310
Зараз, коли ви вже знаєте, як змінити[br]шрифти, з розумом використайте ці знання.

0:03:33.450,0:03:36.949
Якщо ви хочете, щоб ваша сторінка мала гарний[br]вигляд, обмежтесь кількома

0:03:36.949,0:03:40.733
шрифтами і виберіть ті, [br]які добре виглядають разом.

0:03:40.733,0:03:43.603
Але... якщо ви не хочете, щоб ваша[br]сторінка мала гарний вигляд,

0:03:43.603,0:03:47.283
робіть все, що завгодно![br]Розпочинайте змінювати шрифти!

0:03:47.381,0:03:52.141
Переклад еа українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"