Розмір шрифту в CSS

0:01 - 0:04

Ми можемо використовувати CSS також
для того, щоб змінити розмір шрифту.
0:04 - 0:07

Як ви можете побачити, порівнявши
заголовки цієї сторінки з абзацами,
0:07 - 0:09

браузер за замовчуванням надає
0:09 - 0:12

різним елементам стилів
різні розміри.
0:12 - 0:14

Існує розмір шрифту основного тексту
0:14 - 0:16

і більші розміри для кожного
рівня заголовків.
0:16 - 0:19

Однак інколи ми хочемо трохи
змінити ці розміри.
0:19 - 0:22

І ми можемо це зробити за допомогою
властивості CSS "font-size" (розмір шрифту).
0:22 - 0:24

Наприклад:
0:24 - 0:29

Як зробити так, щоб весь шрифт
на сторінці був трохи меншим?
0:29 - 0:31

Що ж, ми перейдемо до тега
0:31 - 0:35

і додамо правило CSS до тега .
0:35 - 0:39

І потім всередині додамо властивість
"font-size".
0:39 - 0:43

Яким має бути значення
для властивості "font-size"?
0:43 - 0:46

Як ми вимірюємо розмір шрифту?
0:46 - 0:48

Це насправді дуже добре запитання,
0:48 - 0:50

тому що існує щонайменше
10 різних одиниць виміру,
0:50 - 0:52

які надає CSS для розміру шрифтів.
0:53 - 0:56

Почнімо з одиниць, які ви
вже бачили раніше: пікселі.
0:56 - 0:59

Ми використовували пікселі, щоб
змінити розмір наших зображень,
0:59 - 1:01

і ми ще багато де будемо їх
використовувати в CSS.
1:01 - 1:03

Спробуймо 11 пікселів.
1:04 - 1:06

Все стало меншим.
1:06 - 1:09

Навіть заголовки зменшились.
1:09 - 1:11

Чому заголовки також зменшились?
1:11 - 1:15

Хіба б вони не мали бути такого розміру,
який встановив для них браузер раніше?
1:16 - 1:16

Ні.
1:16 - 1:22

Тому що значення за замовчуванням
для заголовків встановлене не в пікселях.
1:22 - 1:25

Воно встановлене в інших одиницях
виміру: "em".
1:25 - 1:27

І ця одиниця виміру є відносною,
1:27 - 1:32

і тому змінює розмір шрифту заголовків
пропорційно до шрифту основного тексту.
1:32 - 1:34

Дозвольте я вам покажу,
що я маю на увазі.
1:34 - 1:36

Перейдімо до правила стилю "h2"
1:37 - 1:39

і додаймо властивість "font-size".
1:39 - 1:44

Цього разу, замість того щоб вказати
значення в пікселях, я його задам відносно.
1:45 - 1:50

Наскільки більшим має бути заголовок "h2",
в порівнянні з текстом основної частини?
1:50 - 1:53

Можливо, вдвічі?
1:53 - 1:57

Для цього ми напишемо "2em".
1:57 - 2:00

Що зараз насправді робить браузер —
це обчислює
2:00 - 2:02

розмір шрифту в пікселях.
2:02 - 2:05

Браузер знає, що розмір шрифту тексту
був 11 пікселів,
2:05 - 2:08

а ви сказали, що заголовок "h2"
має бути вдвічі більшим.
2:08 - 2:12

Тому зараз усі заголовки "h2"
мають 22 пікселі.
2:12 - 2:17

Якщо ми змінимо розмір шрифту
тексту на 12 пікселів,
2:17 - 2:19

тоді яким буде розмір заголовків "h2"?
2:19 - 2:21

Правильно, 24 пікселі.
2:22 - 2:26

А якщо ми змінимо розмір шрифту
заголовків на "1,5em"?
2:27 - 2:31

Тепер заголовки будуть
12 * 1,5,
2:31 - 2:33

що дорівнює 18 пікселів.
2:33 - 2:38

Ми можемо також визначити розмір пікселів
для заголовків, так само як ми це робили
2:38 - 2:40

для тексту, і це працюватиме так само.
2:40 - 2:42

Все залежить від того, як вам простіше.
2:42 - 2:45

І як я вже казала раніше, існує багато
інших одиниць виміру, які ми можемо
2:45 - 2:47

використовувати замість пікселів та "em".
2:47 - 2:50

Пікселі та "em" — це просто найпоширеніші
одиниці виміру.
2:50 - 2:51

Але якщо вам хочеться більшого,
2:51 - 2:53

прогляньте документацію щодо
розміру шрифтів
2:53 - 2:55

або пошукайте більше інформації
в Інтернеті.
2:56 - 2:59

Настав час зробити чудовими розміри
ваших шрифтів!
2:59 - 3:03

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

Title:: Розмір шрифту в CSS
Description:: more » « less
Video Language:: English
Duration:: 03:00

	Julia edited Ukrainian subtitles for CSS font size
	Julia edited Ukrainian subtitles for CSS font size
	Zoriana Havrylyuk edited Ukrainian subtitles for CSS font size

Ukrainian subtitles

Revisions

Revision 3 Edited

Julia

Розмір шрифту в CSS

Revisions

Our website uses cookies

Operating cookies (Required)