Шрифти в CSS

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

Але ви можете зробити значно
більше з текстом у CSS.

Спочатку, змінімо шрифт.

Що таке шрифт? Ви точно знаєте,
що це, але, можливо,

ви не знали, як це називається.

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

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

чи, можливо, вони наче написані
чорнильною ручкою.

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

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

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

font-family: sans-serif.

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

Зараз вони мають
трохи простіший вигляд.

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

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

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

Коли ми кажемо браузеру використати шрифт
"serif", він використає шрифт "serif",

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

Однак мені не дуже подобається,
цей шрифт, тому зараз

я поверну шрифт "sans-serif".

Слово "sans" походить з латинської мови
і означає "без".

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

Ось чому літери мають простіший вигляд.

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

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

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

за замовчуванням на комп'ютері глядача,
а не автора.

Тому дуже ймовірно, що ми дивитимемось
на різні шрифти, якщо

ваш комп'ютер має інші значення
за замовчуванням, ніж мій.

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

сторінки бачив її точно такою ж,
як бачу її я.

В такому разі я можу визначити точне
ім'я шрифту, наприклад, Helvetica.

Таке спрацює, якщо і ви, і я матимемо
шрифт Helvetica на наших комп'ютерах.

Але не всі комп'ютери мають однакові
шрифти, і в такому випадку комп'ютер

повністю проігнорує цю вказівку.

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

якщо певного шрифту не буде на комп'ютері.

Ви ставите кому після "Helvetica" і
пишете "sans-serif".

Тепер, якщо комп'ютер шукатиме шрифт
"Helvetica" і не знайде його,

він використає шрифт "sans-serif"
за замовчуванням.

Загалом, щоразу, як ви визначатимете
конкретне ім'я шрифту, як Helvetica,

ви маєте також визначати
альтернативний варіант шрифту.

Окрім "serif" і "sans-serif" існує
декілька інших стандартних

шрифтів, які ми можемо
використовувати.

Якщо ми хочемо, щоб слова були наче
написані від руки, ми обираємо

"font-family: cursive".

Якщо ми хочемо, щоб вони виглядали
веселіше, ми можемо спробувати шрифт "fantasy".

А якщо ми хочемо, щоб вони були
наче надруковані на друкарській машинці,

ми можемо використати шрифт
"monospace".

Цей шрифт має фіксовану ширину, що
означає, що всі літери

будуть однакові по ширині.

І насправді, ви бачили багато шрифтів
"monospace" тут, на сайті KhanAcademy,

тому що ми завжди використовуємо
такі шрифти для редакторів коду.

Оскільки ми хочемо, щоб весь код
лежав на одній прямій, незалежно

від літер у слові.

Зараз, коли ви вже знаєте, як змінити
шрифти, з розумом використайте ці знання.

Якщо ви хочете, щоб ваша сторінка мала гарний
вигляд, обмежтесь кількома

шрифтами і виберіть ті,
які добре виглядають разом.

Але... якщо ви не хочете, щоб ваша
сторінка мала гарний вигляд,

робіть все, що завгодно!
Розпочинайте змінювати шрифти!

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