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

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

Для того щоб підключити шрифт в CSS, використовується правило:

@font-face { /* властивості шрифту */ }.

Конструкція @font-face може містити декілька властивостей, які визначають параметри шрифту, наприклад, такі як font-family, font-size, font-style. Основна властивість це посилання на сам файл шрифту, вказується у вигляді src: путь_к_файлу_шрифта. Шлях до файла може бути відносним або абсолютним.

Приклад, як підключити шрифт в CSS:

@font-face {
font-family:’DINProLt’;
font-style:lighter;
src:url(fonts/DINPro-Light.woff) format(‘woff’);
}
@font-face {
font-family:’DINProB’;
font-style:bolder;
src:url(fonts/DINPro-Black.woff) format(‘woff’);
}

Далі ми можемо скористатися ним для оформлення:

p { font-family:DINProLt; }
b { font-family:DINProB; }

В цілому це буде виглядати таким чином:

Як підключити шрифт в css?
@font-face {
font-family:’DINProLt’;
font-style:lighter;
src:url(fonts/DINPro-Light.woff) format(‘woff’);
}
@font-face {
font-family:’DINProB’;
font-style:bolder;
src:url(fonts/DINPro-Black.woff) format(‘woff’);
}
p { font-family:DINProLt; }
b { font-family:DINProB; }

Цей текст буде оформлений шрифтом, який був присвоєний тегу p

Цей текст буде оформлений шрифтом, який був присвоєний тегу b

Переглянути робочий приклад ви можете за цим посиланням.

Додав: htmaker, 22.07.2016 р.
(Ще не оцінили)

Завантаження…

Діліться з друзями:

См. також:


Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript