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