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

2
00:00:05,303 --> 00:00:08,682
Але ви можете зробити значно
більше з текстом у CSS.

3
00:00:09,509 --> 00:00:11,632
Спочатку, змінімо шрифт.

4
00:00:12,577 --> 00:00:15,925
Що таке шрифт? Ви точно знаєте,
що це, але, можливо,

5
00:00:15,925 --> 00:00:17,284
ви не знали, як це називається.

6
00:00:17,284 --> 00:00:19,857
Це стиль літер, які формують слова:

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

8
00:00:23,196 --> 00:00:25,903
чи, можливо, вони наче написані 
чорнильною ручкою.

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

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

11
00:00:35,729 --> 00:00:37,957
і додам тут властивість "font-family"
(сімейства шрифтів).

12
00:00:38,279 --> 00:00:41,279
font-family: sans-serif.

13
00:00:41,739 --> 00:00:43,829
Чи ви бачите, як змінились літери?

14
00:00:44,115 --> 00:00:45,805
Зараз вони мають 
трохи простіший вигляд.

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

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

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

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

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

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

21
00:01:10,554 --> 00:01:13,114
я поверну шрифт "sans-serif".

22
00:01:14,246 --> 00:01:17,806
Слово "sans" походить з латинської мови
і означає "без".

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

24
00:01:22,101 --> 00:01:23,722
Ось чому літери мають простіший вигляд.

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

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

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

28
00:01:37,710 --> 00:01:41,216
за замовчуванням на комп'ютері глядача,
а не автора.

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

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

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

32
00:01:52,530 --> 00:01:56,263
сторінки бачив її точно такою ж,
як бачу її я.

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

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

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

36
00:02:12,708 --> 00:02:14,449
повністю проігнорує цю вказівку.

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

38
00:02:20,058 --> 00:02:22,303
якщо певного шрифту не буде на комп'ютері.

39
00:02:22,979 --> 00:02:28,001
Ви ставите кому після "Helvetica" і 
пишете "sans-serif".

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

41
00:02:32,737 --> 00:02:34,438
він використає шрифт "sans-serif"
за замовчуванням.

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

43
00:02:39,324 --> 00:02:43,515
ви маєте також визначати
альтернативний варіант шрифту.

44
00:02:43,727 --> 00:02:47,629
Окрім "serif" і "sans-serif" існує
декілька інших стандартних

45
00:02:47,629 --> 00:02:49,877
шрифтів, які ми можемо
використовувати.

46
00:02:50,100 --> 00:02:55,274
Якщо ми хочемо, щоб слова були наче 
написані від руки, ми обираємо

47
00:02:55,274 --> 00:02:58,274
"font-family: cursive".

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

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

50
00:03:08,305 --> 00:03:11,124
ми можемо використати шрифт
"monospace".

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

52
00:03:14,606 --> 00:03:16,306
будуть однакові по ширині.

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

54
00:03:20,258 --> 00:03:23,328
тому що ми завжди використовуємо
такі шрифти для редакторів коду.

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

56
00:03:27,216 --> 00:03:28,511
від літер у слові.

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

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

59
00:03:36,949 --> 00:03:40,733
шрифтами і виберіть ті, 
які добре виглядають разом.

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

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

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