-
Ми можемо використовувати CSS також
для того, щоб змінити розмір шрифту.
-
Як ви можете побачити, порівнявши
заголовки цієї сторінки з абзацами,
-
браузер за замовчуванням надає
-
різним елементам стилів
різні розміри.
-
Існує розмір шрифту основного тексту
-
і більші розміри для кожного
рівня заголовків.
-
Однак інколи ми хочемо трохи
змінити ці розміри.
-
І ми можемо це зробити за допомогою
властивості CSS "font-size" (розмір шрифту).
-
Наприклад:
-
Як зробити так, щоб весь шрифт
на сторінці був трохи меншим?
-
Що ж, ми перейдемо до тега
-
і додамо правило CSS до тега .
-
І потім всередині додамо властивість
"font-size".
-
Яким має бути значення
для властивості "font-size"?
-
Як ми вимірюємо розмір шрифту?
-
Це насправді дуже добре запитання,
-
тому що існує щонайменше
10 різних одиниць виміру,
-
які надає CSS для розміру шрифтів.
-
Почнімо з одиниць, які ви
вже бачили раніше: пікселі.
-
Ми використовували пікселі, щоб
змінити розмір наших зображень,
-
і ми ще багато де будемо їх
використовувати в CSS.
-
Спробуймо 11 пікселів.
-
Все стало меншим.
-
Навіть заголовки зменшились.
-
Чому заголовки також зменшились?
-
Хіба б вони не мали бути такого розміру,
який встановив для них браузер раніше?
-
Ні.
-
Тому що значення за замовчуванням
для заголовків встановлене не в пікселях.
-
Воно встановлене в інших одиницях
виміру: "em".
-
І ця одиниця виміру є відносною,
-
і тому змінює розмір шрифту заголовків
пропорційно до шрифту основного тексту.
-
Дозвольте я вам покажу,
що я маю на увазі.
-
Перейдімо до правила стилю "h2"
-
і додаймо властивість "font-size".
-
Цього разу, замість того щоб вказати
значення в пікселях, я його задам відносно.
-
Наскільки більшим має бути заголовок "h2",
в порівнянні з текстом основної частини?
-
Можливо, вдвічі?
-
Для цього ми напишемо "2em".
-
Що зараз насправді робить браузер —
це обчислює
-
розмір шрифту в пікселях.
-
Браузер знає, що розмір шрифту тексту
був 11 пікселів,
-
а ви сказали, що заголовок "h2"
має бути вдвічі більшим.
-
Тому зараз усі заголовки "h2"
мають 22 пікселі.
-
Якщо ми змінимо розмір шрифту
тексту на 12 пікселів,
-
тоді яким буде розмір заголовків "h2"?
-
Правильно, 24 пікселі.
-
А якщо ми змінимо розмір шрифту
заголовків на "1,5em"?
-
Тепер заголовки будуть
12 * 1,5,
-
що дорівнює 18 пікселів.
-
Ми можемо також визначити розмір пікселів
для заголовків, так само як ми це робили
-
для тексту, і це працюватиме так само.
-
Все залежить від того, як вам простіше.
-
І як я вже казала раніше, існує багато
інших одиниць виміру, які ми можемо
-
використовувати замість пікселів та "em".
-
Пікселі та "em" — це просто найпоширеніші
одиниці виміру.
-
Але якщо вам хочеться більшого,
-
прогляньте документацію щодо
розміру шрифтів
-
або пошукайте більше інформації
в Інтернеті.
-
Настав час зробити чудовими розміри
ваших шрифтів!
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "magneticOne.org"
