WEBVTT

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

00:00:05.303 --> 00:00:08.682
Але ви можете зробити значно
більше з текстом у CSS.

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

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

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

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

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

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

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

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

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

00:00:38.279 --> 00:00:41.279
font-family: sans-serif.

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

00:00:44.115 --> 00:00:45.805
Зараз вони мають 
трохи простіший вигляд.

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

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

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

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

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

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

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

00:01:14.246 --> 00:01:17.806
Слово "sans" походить з латинської мови
і означає "без".

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

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

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

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

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

00:01:37.710 --> 00:01:41.216
за замовчуванням на комп'ютері глядача,
а не автора.

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

00:01:45.317 --> 00:01:47.595
ваш комп'ютер має інші значення
за замовчуванням, ніж мій.

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

00:01:52.530 --> 00:01:56.263
сторінки бачив її точно такою ж,
як бачу її я.

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

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

00:02:08.436 --> 00:02:12.641
Але не всі комп'ютери мають однакові
шрифти, і в такому випадку комп'ютер

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

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

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

00:02:22.979 --> 00:02:28.001
Ви ставите кому після "Helvetica" і 
пишете "sans-serif".

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

00:02:32.737 --> 00:02:34.438
він використає шрифт "sans-serif"
за замовчуванням.

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

00:02:39.324 --> 00:02:43.515
ви маєте також визначати
альтернативний варіант шрифту.

00:02:43.727 --> 00:02:47.629
Окрім "serif" і "sans-serif" існує
декілька інших стандартних

00:02:47.629 --> 00:02:49.877
шрифтів, які ми можемо
використовувати.

00:02:50.100 --> 00:02:55.274
Якщо ми хочемо, щоб слова були наче 
написані від руки, ми обираємо

00:02:55.274 --> 00:02:58.274
"font-family: cursive".

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

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

00:03:08.305 --> 00:03:11.124
ми можемо використати шрифт
"monospace".

00:03:11.204 --> 00:03:14.606
Цей шрифт має фіксовану ширину, що
означає, що всі літери

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

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

00:03:20.258 --> 00:03:23.328
тому що ми завжди використовуємо
такі шрифти для редакторів коду.

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

00:03:27.216 --> 00:03:28.511
від літер у слові.

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

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

00:03:36.949 --> 00:03:40.733
шрифтами і виберіть ті, 
які добре виглядають разом.

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

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

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