Веб-шрифты и как их подключать на сайте?
Просмотров: 770223Как поменять шрифт на своем сайте? Как подключить общедоступные шрифты из библиотеки Google Fonts, а что делать, если шрифт эксклюзивный? Если вопросы для вас актуальны, читаем дальше
Форматы шрифтов
По аналогии с другими типами файлов шрифты имеют различные форматы. Всего их насчитывается несколько десятков, а наиболее популярными из использующихся в сети считаются TTF, EOT, WOFF и SVG. При этом каждый поддерживается лишь определенными версиями программного обеспечения.
Помимо принадлежности к конкретным системам они отличаются технологией отрисовки символов и методом сжатия. От последнего зависит объем получаемого файла, что напрямую влияет на время его загрузки, а значит – и на скорость отображения страницы. Это критично только при установке нового шрифта, так как после скачивания содержащий его файл будет храниться в кэше. На данный момент при внедрении конкретного шрифта на сайт необходимо подготовить все эти форматы шрифта: TTF (или OTF), WOFF,EOT и SVG .
Подключение Google Fonts
Для того чтобы облегчить работу со шрифтами, компанией Google был создан сервис «Fonts», в котором представлено несколько сотен шрифтов, включая десятки кириллических.
После выбора нужных шрифтов, а их может быть несколько, сервис формирует свернутое окно с режимами «стандарт» и «импорт», каждый из которых имеет два вида кода:
- добавляем спец. строчку к заголовку HTML-документа между тегами <head> + прописываем нужную комбинацию в CSS-файле;
- либо пишем другую строчку между тегами <style>, импортируя шрифт, + снова прописываем специальную строчку в CSS-файле ).
Там же находится кнопка загрузки, позволяющая скачать файлы шрифтов к себе на компьютер.
Основные преимущества сервиса заключаются в том, что в момент обращения, определяется браузер пользователя и система сама подгружает пользователю нужный файл со шрифтом. Иными словами, не нужно беспокоиться ни о версии программного обеспечения, ни о формате шрифта.
Использование собственного шрифта
Чтобы воспользоваться шрифтом, который отсутствует в Google Fonts, необходимо применить правило «@font-face», содержащее название шрифта и путь к его файлу.
"FontName"
— название шрифта, который пытаемся подключить.
url ("/path/FontName.eot")
— здесь мы указываем путь, где лежит наш файл со шрифтом в формате .eot.
font-weight: normal;
— этим значением мы задаем насышенность шрифта: обычная, полужирная, жирная и т.д.
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
font-style: normal;
— здесь мы задаем начертение текста: нормальное, курсив или наклонное
font-style: normal | italic | oblique
- Загружаем на сервер сайта файлы с разными форматами выбранного шрифта. Ещё раз напомню, что разные форматы загружаются для того, чтобы его поддерживали все браузеры;
- Указываем в коде название шрифта, и прописываем ссылку на файл;
- Добавляем имя шрифта в свойство font-family"" элемента, который будет отображаться данным шрифтом.
В CSS-правилах кроме нашего шрифта так же принято через запятую указывается другие шрифты, так сказать — основной и дополнительный. Это делается для тех случаев, если на определенном устройстве или в отдельно взятом браузере основной шрифт не распознаётся ( не может быть установлен), тогда браузер отображает информацию с помощью дополнительных шрифтов. По поводу дополнительных: рекомендуется применять самые распространенные шрифты, которые есть практически на всех компьютерах: Arial, Courier New, Georgia, Times New Roman и Verdana.
Иначе будет задействован тот шрифт, который стоит у пользователя по умолчанию.
>>> Почему надо подписаться на обновления? <<<
Буду благодарен за ретвит и клацанье по кнопочкам. Спасибо :)
Tweet
Как установить такие комментарии вконтакте себе на сайт?
Спасибо за интересную и познавательную статью! Хочу у себя на сайте поменять шрифты, но не знал как. Выручаете
[Ответить]