Як використовувати свій шрифт на сайті

При розробці дизайну сайту часто виникає необхідність в підключенні сторонніх шрифтів. У CSS дана можливість здійснюється через атрибут font-face. Файл самого шрифту повинен мати стандартне для Windows розширення TrueType (ttf) або OpenType (otf).
Як використовувати свій шрифт на сайті
Вам знадобиться
  • - файл шрифту TrueType або OpenType.
Інструкція


1
Створіть файл таблиці каскадних стилів (.css) і відкрийте його за допомогою Блокнота як звичайний текстовий файл. Далі впишіть рядки: @ font-face {font-family: "Назва шрифту" -src: url ("шлях до файлу шрифту") - font-size: 12px; } Значення параметра font-family має збігатися з назвою вашого шрифту. В якості url можна вказувати як абсолютний, так і відносний шлях до файлу ttf або otf. У font-size вкажіть розмір букв в пунктах, відсотках або пікселях. У відповідності зі специфікацією CSS ви додатково можете задати будь-які доступні параметри накреслення (наприклад, font-weight або font-style).
2
Збережіть файл. Тепер підключіть його до вашої HTML-сторінці за допомогою тега, який зазвичай прописується в розділі: не вимагає закриває дескриптора.
3
Для використання шрифту необхідно прописати додаткові параметри. Скористайтеся параметром font-family: h1 {font-family: "назва підключеного шрифту" -} Тепер всі заголовки першого рівня будуть написані літерами з вашого файлу. Якщо ви хочете надати власне накреслення всім словами на сайті, то вкажіть параметр font-family аналогічним чином в body: body {font-family: "ім'я шрифту" -}
4
Також ви можете створити певний клас користуватися ним при необхідності вже в самому HTML: .myfont {font-family: "назву шрифту" -} У коді сторінки це буде виглядати так:

Тема 1

Простий заголовок


Увага, тільки СЬОГОДНІ!