Від автора: вітаю вас на webformyself. Інформація – це те, заради чого ми всі використовуємо інтернет. Добре підібраний шрифт дозволяє краще сприймати текстову інформацію, що збільшує лояльність людей до якогось ресурсу. Давайте розбиратися, як змінити шрифт на сайті.
Як змінювати параметри
Варто відзначити відразу, що під зміною тексту можна розуміти просто зміна його параметрів, або ж зміна самого імені шрифту, після чого літери і символи будуть виглядати абсолютно по-іншому. У першому ж випадку він просто придбає інший колір, стане більш жирним або курсивним.
Такі параметри змінюються за допомогою css-властивостей для роботи з текстом. Докладно про них ви можете дізнатися з нашого підручника з css для новачків.
Як міняти шрифти
А ми переходимо до нашого головного на сьогодні питання. Для таких змін вам буде потрібно знову ж знання css хоча б на базовому рівні. Щоб змінити шрифт, необхідно написати для потрібного нам елемента властивість:
font-family: назва;
Наприклад, якщо міняти ви хочете для всього сайту, то потрібно шукати в таблиці стилів (зазвичай style.css) селектор body. Зазвичай у нього задано декілька шрифтів. Той, що стоїть першим після двокрапки і буде використовуватися в першу чергу. Якщо з якихось причин його не вийшло завантажити браузер обере другий і так до тих пір, поки не буде знайдений шрифт, який доступний для використання в даний момент.
Ви повинні знати, що існують так звані стандартні шрифти, які є на будь-OC і їх можна використовувати без всяких страхів. Наприклад, це Arial, Times New Roman, Tahoma і т. д. Для ще більшої надійності після зазначення конкретної назви через кому можна вказати сімейство шрифтів. У цьому випадку, якщо вибране накреслення не доступно, браузер вибере перший оптимальний з родини.
font-family: Arial, “Times New Roman”, sans-serif;
У цьому прикладі спочатку буде підставлений шрифт Arial. Якщо він знайдений, то саме він буде використовуватися. Якщо ні, то браузер буде шукати Times New Roman. До речі, зверніть увагу на те, що якщо назва шрифту складається з кількох слів. Його потрібно брати в подвійні лапки.
Через кому ми вказали сімейство шрифтів “без зарубок”. На всяк випадок. Також існують такі: serif (serif), cursive (курсивні), monospace (табличні у), fantasy (декоративні). Кожна колекція для своїх цілей. Наприклад, основний шрифт для читання інформації краще вибирати без зарубок.
Для цитат ви можете використовувати курсивний текст, для виведення машинного коду – моноширинний. Нарешті, різні заголовки люблять оформляти за допомогою декоративних шрифтів.
Як завантажити новий шрифт на сайт?
Так, така можливість у вас є. Для цього раджу відразу створити у вашій темі папку fonts, в майбутньому ви будете складати туди всі шрифти, які будете підключати. Взагалі я не рекомендую підключати занадто багато.
Власне, способів додати нові шрифти на сайті я бачу два:
Використовувати сервіс Google Fonts. Тут ви можете вибрати потрібний шрифт і дуже швидко підключати його до сайту. У такому випадку ніяких додаткових папок вам підключати не потрібно – все буде вантажитися з сховища сервісу, але при цьому трохи буде зменшуватися швидкість завантаження. Тому я не раджу вам підключати занадто багато. Максимум – 3-4 шрифту.
На скріншоті ви можете бачити, яку кнопку треба натиснути для швидко використання шрифту. Також, якщо він вам сподобався, можна додати до себе в колекцію, щоб не втратити.
По натисненню на швидке використання сервіс запропонує вам кілька варіантів підключення і код, який потрібно скопіювати для того, щоб шрифт був підключений. Я раджу підключати стандартним способом через тег link.
Після цього ви можете використовувати шрифт через font-face, сервіс підкаже вам, як правильно писати його назву.
Спосіб другий: Закачати на сайт і підключити через @font-face. В css є спеціальний синтаксис, який дозволяє підключити нові шрифти. Для цього їх спочатку потрібно завантажити в яку-небудь директорію на вашому сайті. Я раджу створити нову – fonts. Також така директорія вже може бути у вас, тоді просто скидаємо в неї папки з файлами. Де її взяти? Ну звичайно, качаємо усі потрібні шрифти в інтернеті, де ж іще.
Хотів би зазначити, що для кроссбраузерного відображення, файл повинен бути як мінімум в декількох форматах. А саме, ttf, woff, eot. На скріншоті ви можете побачити типовий приклад підключення:
Найголовніше, вказати ім’я, а також шлях до всіх доступних форматів за допомогою властивості src через кому.
Тепер скрізь, де потрібно поставити цей шрифт, просто копіюємо рядок з font-family і ставимо. Розумно буде дописати пару більш простих шрифтів через кому.
Розмір та інші параметри
Ну а як змінити розмір шрифту на сайті? За це відповідає властивість font-size і йому можна вказувати значення в пікселях, відносних одиницях em, відсотках і в інших одиницях. Хорошим тоном веб-розробки вважається завдання розмірів у відносних одиницях, що текст виглядав максимально читабельно налаштування розміру шрифту.
Тобто для тіла сторінки задається font-size: 100%, а всім іншим елементам він визначається у відносних одиницях em. Наприклад, якщо ви хочете, щоб заголовки першого рівня були в 3 рази більше звичайного розміру тексту на сторінці, пропишіть:
h1{
font-size: 3em;
}
Ну і так далі. Такий запис дозволяє розмірами змінюватися в залежності від налаштувань браузера користувача.
До речі, можливо ви хочете дізнатися ще більше цікавих властивостей по роботі з текстом? Це легко зробити, просто перейдіть в наш підручник з css і дивіться. Там не тільки можна навчитися визначати розмір, але і регістр, підкреслення і багато іншого.
Що ж, сподіваюся, робота з контентом стала для вас трохи зрозуміліше.
