Что бы увидеть email и телефон, включите JavaScript.

Интеграция шрифтов с помощью правил CSS


Изображение к статье: Интеграция шрифтов с помощью правил CSS

Продолжим тему интеграции шрифтов на сайт, которую я начал в статье Интеграция шрифтов Google Web Fonts. Вы не нашли подходящий шрифт на выше упомянутом сервисе от Google, или Вы пытаетесь свести к минимуму что-либо подгружаемое при построении страниц Вашего сайта, интегрировать шрифты придётся ниже описанным способом.

Первым делом Вам необходимо будет найти файл со шрифтом и скачать его себе на компьютер. Для нормальной интеграции и в дальнейшем безоблачного использования шрифта, этот файл будет необходим в 3 форматах:

  • Embedded OpenType (расширение eot) – это формат, внедряемых в web-страницы шрифтов Open Type, разработанный корпорацией Microsoft;
  • Web Open Font Format (расширение woff) – это формат сжатого шрифта Open Type или True Type, полностью совпадающий со своим оригиналом;
  • TrueType (расширение ttf) – это формат компьютерных шрифтов, который разработала фирма Apple.

Я обычно создаю отдельную директорию fonts в директории css (в ней обычно, находятся файлы стилей сайта), куда и скидываю все файлы интегрируемых мной шрифтов.

Далее, используем в начале файла стилей сайта правило CSS:

@font-face { свойства шрифта }

Вы должны помнить, что данное правило поддерживается только 2 и 3 версией CSS. Рассмотрим интеграцию на примере шрифта Corinthia, можете скачать тут, архив с файлами шрифта и кодом CSS для интеграции. Я обычно код интеграции вписываю в отдельный файл стилей fonts.css и потом подключаю его в начале основного файла стилей сайта еще одним правилом CSS:

@import url("имя файла") [типы носителей];

или

@import "имя файла" [типы носителей];

Итак, пишем в файле стилей, в котором Вы производите интеграцию шрифта, следующие строки:

@font-face { font-family: 'Corinthia'; src: url('fonts/corinthia.eot'); src: url('fonts/corinthia.eot?#iefix') format('embedded-opentype'), url('fonts/corinthia.woff') format('woff'), url('fonts/corinthia.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Обратите внимание, файлы шрифта располагаются в отдельной директории fonts. Теперь Вы можете его использовать, как и стандартные шрифты с помощью:

font-family: 'Corinthia', sans-serif;

Пример нашего шрифта: Шрифт Corinthia

Существуют специальные on-line сервисы, так называемые Webfont Generator. Там можно настроить, что именно будет в файлах шрифтов с расширениями: eot, ttf и woff. Плюс при запуске генерации, Вам будет предложено скачать уже готовый пакет с файлами. В него будут входить сами файлы интегрируемых шрифтов, файлы CSS и файл index.html, представляющий собой демонстрацию полученного пакета. Вот один из таких сервисов www.fontsquirrel.com.

Понравилась статья, поделитесь ей с друзьями!
RSS подписка по электронной почте


Комментарии (0)