Як встановити шрифт в html

13

Від автора: вітаємо вас на сторінках блогу Webformyself. У цій статті я хочу відповісти на питання, як встановити шрифт в html. Дехто все ще робить це неправильним, тому дуже важливо розібратися з питанням більш ретельно.

Як ставили шрифт раніше

Раніше в html використовувався спеціальний парний тег font, який виступив як контейнер для зміни параметрів шрифту, таких, як гарнітура, колір і розмір. Сьогодні такий підхід є в корені неправильним. Чому? Веб-стандарти визначають, що зовнішній вигляд сторінки не має прописуватися в html-розмітки. До того ж, тег підтримується повноцінно тільки в дуже старої версії HTML HTML 3.

Завдання шрифту в html правильним чином

Сьогодні для цієї мети варто використовувати виключно можливості css. Ця мова якраз і створений для того, щоб визначати через нього зовнішній вигляд. До того ж в css набагато більше властивостей, які впливають на зовнішній вигляд тексту. Розглянемо потроху кожне з них:

Font-style. Визначає накреслення тексту. Приймає такі значення:

Normal – звичайне.

Italic – курсив.

Oblique – похилий текст. Він трохи відрізняється від курсиву, букви схиляються трохи вправо.

Font-variant. Властивість призначає, як потрібно інтерпретувати написання літер. Має лише два значення:

Normal – звичайне поведінка.

Small-caps – усі рядкові літери перетворюються в великі, а їх розмір трохи зменшується у порівнянні з звичайним шрифтом.

Як встановити шрифт в html

Font-weight. Визначає жирність тексту. Значення можна задавати ключовими словами або числовим значенням. Давайте розглянемо всі варіанти:

Normal – звичайний текст

Bold – текст жирним шрифтом

Bolder – буде виводитися жирніше, ніж він виводиться батьківського елемента.

Lighter – літери отримають менше жирності, в порівнянні з батьком.

Ось так все просто. Крім цього, є можливість задавати значення у вигляді чисел від 100 до 900, де 900 – самий жирний. Наприклад, значенню normal відповідає 400, а bold – 700.

На жаль, більшість браузерів не розпізнають цих числових значень і можуть застосовувати лише два значення – normal і bold. Для експерименту я створив 9 абзаців і поставив кожному різну жирність тексту – від 100 до 900. Потім відкрив цю веб-сторінку в різних браузерах і ні один не відобразив різні накреслення. Висновок: краще не застосовуйте числові значення.

Font-size. Це властивість визначає розмір букв. Розмір можна задавати в різних відносних і абсолютних величинах. Найчастіше розмір задається в пікселях, відносних одиницях em і відсотках. Якщо ви хочете докладніше ознайомитися з завданням розміру в css, то почитайте цю статтю, де все описано більш докладно.

Font-family. Мабуть, саме основне властивість, яка визначає сімейство або конкретне ім’я використовуваного шрифту. Якщо ви використовуєте конкретну назву, то потрібно переконатися, що заданий шрифт знайдеться на всіх комп’ютерах користувачів. Для надійності через кому потрібно прописати альтернативний варіант або ціле сімейство. Шрифти поділяються на такі колекції:

Serif – с зарубками

Sans-serif – без зарубок, рекомендується застосовувати для основного тексту.

Monospace – табличні у, ширина кожної літери однакова, відповідно.

Cursive – курсивні.

Fantasy – незвичайні, декоративні.

Кожне сімейство підходить під різні потреби. Наприклад, з допомогою fantasy часто оформляють різні заголовки, а monospace використовуються для виведення машинного коду і т. д. Конкретніше дізнатися назви шрифтів ви можете, наприклад, у текстовому редакторі або в фотошопі.

Скорочений запис

Все те, що ми розглянули вище, можна дуже легко записати по суті в одну сходинку з допомогою чудового властивості font, яка збирає разом всі налаштування. Записувати потрібно в такій послідовності:

Font: font-style | font-variant | font-weight | font-size | font-family;

Як встановити шрифт в html

Як встановити шрифт в html

Якщо якийсь параметр вам вказувати не потрібно, то він просто пропускається. Обов’язковими тут є тільки розмір і сімейство шрифтів, все інше вказувати необов’язково, якщо в цьому немає необхідності. Використання скороченого запису дозволяє сильно скоротити код css. Користуйтеся нею, тому що це хороша оптимізація для роботи сайту.

Як встановити шрифт в html різним елементам

Так, що ми захопилися описом всіх властивостей шрифту. Це дуже важлива інформація, але як взагалі його правильно ставити? Використовуйте потрібні селектори, щоб дотягнутися до потрібних елементів. Далі я пропоную кілька прикладів:

p a{
font-family: Verdana, sans-serif;
}

Всі посилання в абзацах отримають шрифт Verdana, а якщо браузер його не знайде, то буде використаний інший з цього ж сімейства.

table{
font: normal small-caps bold 12px Arial;
}

Для табличних даних задається багато параметрів шрифт: зменшені великі літери, жирне накреслення, розмір і назва шрифту.

.header #logo{
font-family: fantasy;
}

Елемент з ідентифікатором logo, що знаходиться в блоці з класом header, отримує шрифт з колекції декоративних.

Таким чином, вам досить знати різні css-селектори і ви зможете дотягнутися до будь-якого елемента на веб-сторінці і оформити для нього свої стилі. Не перестарайтеся, правила хорошого дизайну не допускають, щоб на одному сайті використовувалося не більше трьох шрифтів. Краще дотримуватися цього принципу.

Отже, нам вдалося розглянути всі властивості для шрифтів, які є в css. Звичайно, це не всі ефекти, які можна застосувати до тексту. Його можна повернути, додати йому тінь або навіть кілька тіней, підкреслити, змінити колір і т. д. Але всі ці чудові можливості реалізуються іншими властивостями, без приставки font.

Наприклад, колір можна визначити за допомогою властивості color. Про це написана окрема стаття. Якщо ви до сьогоднішнього дня думали, що в css можна вибрати лише один з сотні квітів, то ви сильно помилялися. Пропоную вам прочитати статтю і переконатися в тому, що можна вибирати з мільйонів відтінків.

Ще інформація по роботі з текстом ви можете знайти в нашому преміум-розділі, де висвітлюються ще деякі моменти.

А на цьому я буду з вами прощатися, зі шрифтами ніби трохи розібралися. Не забувайте підписатися на блог, якщо ще не зробили цього, тому що тут вас чекає багато матеріалів по сайтостроению.