Використання будь-якого шрифту на своєму веб-сайті CSS3
Користувацькі шрифти є одним із найпривабливіших аспектів CSS3 для дизайнерів. З новим правилом @font-face, ви можете додати будь-який шрифт на ваш сайт або веб-сторінку, незалежно від того, встановлено цей шрифт у користувача чи ні. Звичайно, можна завжди скористатися Google Fonts і т.д., але в даній статті йтиметься про використання власного унікального або купленого шрифту.
Як і в більшості CSS3, основний код досить простий, але на практиці для досягнення максимального ефекту необхідно врахувати всі умови.
У цьому короткому уроці ми покажемо основи застосування шрифту на веб-сайті за допомогою @font-face CSS3.
Завантажте шрифт
По-перше, переконайтеся, що шрифти, які ви хочете використовувати, мають ліцензію для їх використання в Інтернеті. Практично всі безкоштовні шрифти можна використовувати на сайтах. Але якщо ви купили преміум шрифт, переконайтеся, що ви маєте право на використання онлайн для свого веб-сайту або проекту.
Далі завантажте вибраний шрифт на вашому сервері. Ви можете зберігати його у спеціальній папці “Шрифти” для простоти та організації, але це необов'язково.
Не забудьте увімкнути файли для будь-яких варіантів шрифту, який ви плануєте використовувати, наприклад, жирний шрифт або курсив. Ви можете використовувати EOT (Embedded OpenType) файли для Internet Explorer або OTF (OpenType) або TTF (TrueType) для інших. (Додаткові опції включають WOFF (Web Open формат шрифту) та SVG (Scalable Vector Graphics), але ми дотримуватимемося найпоширеніших типів)
Запишіть URL-адресу, де файли шрифтів зберігаються на сервері.
Додаємо font-face у коді CSS
Відкрийте HTML або CSS файл сторінки, над якою ви працюєте.Додаємо font-face код:
Спочатку вкажемо ім'я нашого шрифту:
Далі, вкажемо розташування на сервері для OET шрифту:
Аналогічно вкажемо розташування OTF і TTF шрифтів:
Це мінімально необхідний код, який буде достатнім у більшості випадків. Однак, є додаткові кроки, які ми можемо зробити, щоб зробити код більш надійним. Перше, додамо індикатор типу файлу шрифту:
Як ще один додатковий засіб ефективності, ми можемо попросити браузер перевірити, чи є локальна копія шрифту у користувача. Додамо додатковий код для того, щоб шрифт завантажувався тільки в тому випадку, якщо це необхідно:
У цьому випадку ми маємо два рядки, що задають локальні шрифти, тому що ім'я шрифту має більше одного слова в ньому. Дефіс потрібний для деяких шрифтів, оскільки вони відображаються по-різному в деяких операційних системах – це додатковий захід не потрібний, якщо шрифт має лише одне слово у його назві.
Якщо ви знаєте, що шрифт може мати різні назви у різних системах, слід включати кожен із можливих варіантів.
Застосування шрифту для окремих елементів сторінки
Також, окрім усього сайту, ми можемо застосувати шрифт для окремих елементів на сторінці. У коді CSS для конкретного елемента або групи елементів просто вкажіть ім'я шрифту, в тому числі будь-які fallbacks:
Вказування варіантів шрифтів
Якщо, наприклад, ви хочете використовувати жирну версію шрифту, просто додайте інший font-face, URL файлу шрифту та декларацію “шрифт: жирний;”: