Как установить шрифт PresentScript Cyrillic на сайт
Для установки шрифта «PresentScript Cyrillic» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/presentscript-cyrillic». В файле стилей подключить шрифт, используя конструкцию CSS:
Скопировать в буфер обмена
@font-face { font-family: "PresentScript Cyrillic"; src: url("../fonts/presentscript-cyrillic/presentscript-cyrillic.eot"); /* IE9 Compat Modes */ src: url("../fonts/presentscript-cyrillic/presentscript-cyrillic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/presentscript-cyrillic/presentscript-cyrillic.otf") format("opentype"), /* Open Type Font */ url("../fonts/presentscript-cyrillic/presentscript-cyrillic.svg") format("svg"), /* Legacy iOS */ url("../fonts/presentscript-cyrillic/presentscript-cyrillic.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/presentscript-cyrillic/presentscript-cyrillic.woff") format("woff"), /* Modern Browsers */ url("../fonts/presentscript-cyrillic/presentscript-cyrillic.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; }
Установить шрифт «PresentScript Cyrillic» для требуемого текста, поля, кнопки или другого элемента на сайте:
font-family: "PresentScript Cyrillic";
Пример применения шрифта «PresentScript Cyrillic»:
body { font-family: "PresentScript Cyrillic"; font-size: 1rem; font-weight: normal; line-height: 1.2; color: #000; background-color: #fff; }
Информация о шрифте Esenin script Two
Полное название шрифта
Esenin script Two Regular 400
Семейство
Начертание шрифта
Regular (Обычный)
Насыщенность шрифта
400 — нормальное (Normal)
Версия шрифта
Version 1.000 2005 initial release
Идентификатор шрифта
GophmannA.L: Esenin script Two: 2005
PostScript название шрифта
EseninscriptTwo
Авторское право на шрифт
Copyright (c) Gophmann A.L, 2005. All rights reserved.
Поддержка символов
латинские буквы, русские буквы (кириллица), цифры, знаки препинания и пунктуации
Регистр букв шрифта
верхний (прописные буквы) и нижний (строчные буквы)
Категории шрифта Esenin script Two
Бесплатные шрифты, Кириллические шрифты, Латинские шрифты, Русские шрифты
Предварительный просмотр Esenin script Two
Шрифт Esenin script Two с поддержкой латиницы
Предварительный просмотр шрифта «Esenin script Two» с прописными и строчными латинскими буквами (английский алфавит A-Z и a-z).
Шрифт Esenin script Two с поддержкой кириллицы
Предварительный просмотр шрифта «Esenin script Two» с прописными и строчными русскими буквами (кириллица, русский алфавит А-Я и а-я).
Шрифт Esenin script Two с поддержкой цифр
Предварительный просмотр шрифта «Esenin script Two» с цифрами (0 1 2 3 4 5 6 7 8 9).
Шрифт Esenin script Two с поддержкой знаков препинания и пунктуации
Предварительный просмотр шрифта «Esenin script Two» со знаками препинания и пунктуации (, . / ? ; ‘ : » { } \ | ` ~ ! @ # $ % ^ & * ( ) — _ + =).
Скачать шрифт Esenin script Two
Шрифт Esenin script Two доступен для скачивания в 6 форматах: EOT, OTF, SVG, TTF, WOFF, WOFF2 (IE9 в режиме совместимости, IE6-IE8, Open Type Font, устаревшая iOS, Safari, Android, iOS и любой современный браузер).Внимание! Скачать шрифт Esenin script Two возможно только для некоммерческого использования!
Подробная инструкция по скачиванию шрифтов в статье «Как скачать шрифт на сайте»
Как установить шрифт Esenin script Two на сайт
Для установки шрифта «Esenin script Two» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/esenin-script-two». В файле стилей подключить шрифт, используя конструкцию CSS:
Скопировать в буфер обмена
@font-face { font-family: "Esenin script Two"; src: url("../fonts/esenin-script-two/esenin-script-two.eot"); /* IE9 Compat Modes */ src: url("../fonts/esenin-script-two/esenin-script-two.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/esenin-script-two/esenin-script-two.otf") format("opentype"), /* Open Type Font */ url("../fonts/esenin-script-two/esenin-script-two.svg") format("svg"), /* Legacy iOS */ url("../fonts/esenin-script-two/esenin-script-two.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/esenin-script-two/esenin-script-two.woff") format("woff"), /* Modern Browsers */ url("../fonts/esenin-script-two/esenin-script-two.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; }
Установить шрифт «Esenin script Two» для требуемого текста, поля, кнопки или другого элемента на сайте:
font-family: "Esenin script Two";
Пример применения шрифта «Esenin script Two»:
body { font-family: "Esenin script Two"; font-size: 1rem; font-weight: normal; line-height: 1.2; color: #000; background-color: #fff; }
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:
Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты:
для заголовка — Roboto, для остального текста — Open Sans
Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся
После этого с использованием тега подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.
Если у Вас возникают трудности при подключении шрифтов, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу примера, чтобы понять какой код CSS был использован.
Каскадность в CSS
Цветовое оформление в CSS
Красивый шрифты на fonttextup