|  в избранное  |  e-mail  |  печать |

логотип ООО «Сандриз» это просто наша работа  +7 927·241·97·35 , +7 919·686·71·32

Справка по CMS / Шрифты для сайта


Как будет выглядеть текст на страницах сайта, зависит не только от дизайнера или верстальщика, но и от браузера. Точнее, от тех шрифтов, которые установлены на компьютере или планшете пользователя. Если заявленный на странице шрифт отсутствует в системе, то браузер использует вместо него похожий шрифт, который есть на устройстве или выдаёт кракозябры.

Поэтому для текста на страницах сайта используют шрифты, являющиеся стандартными для большинства операционных систем или относящиеся к определённому типу, например:

  • Arial – типичный представитель рубленных шрифтов или гротеск (без засечек);
  • Times – самый популярный из семейства антиквенных шрифтов (с засечками).

При использовании нестандартных или специфических шрифтов необходимо загрузить их файлы на устройство пользователя и подключить через стили CSS. Иначе мы рискуем показать посетителю сайта страницу с нечитаемыми символами. Казалось бы, всё просто! Но существует ряд особенностей, которые необходимо принять во внимание.

Во-первых, файлы шрифта могут весить несколько мегабайт, поэтому их загрузка на устройство пользователя съедает часть трафика, что довольно критично при выходе в интернет через мобильные сети. Одного этого уже достаточно чтобы не злоупотреблять нестандартными шрифтами и свести их количество к минимуму.

Во-вторых, загрузка шрифта увеличивает общее время загрузки сайта, что понижает его рейтинг в поисковых системах и раздражает пользователей. Ситуация усугубляется, когда шрифт загружается с какого-нибудь сервиса, который может быть временно недоступен. Сайт оказывается в подвешенном состоянии (одна часть кода исполнена браузером, а другая – ещё нет) и пользователь получает поломанную страницу.

Чтобы избежать подобных проблем, рекомендуем размещать файлы дополнительных шрифтов на том же сервере, что и сам сайт (например, в папке font), а загрузку шрифта ставить самой первой в стилевом файле. Тогда формирование страницы начнётся только после скачивания и подключения дополнительного шрифта, что предотвратит выдачу поломанного дизайна.

В-третьих, не все форматы загружаемых шрифтов поддерживаются браузерами. Ниже представлена таблица совместимости, в которой указано какие форматы шрифтов какими браузерами поддерживаются и с какой версии.

Версии браузеров и форматы шрифтов, которые они поддерживают
EOT 5+ × × × × × × ×
TTF 91+ 12+ 4+ 3.5+ 10+ 3.1+ 4.2+ 2.2+
WOFF 9+ 12+ 5+ 3.6+ 11.5+ 5.1+ 5+ 4.4+
SVG × × 4-382 3.5-4 10-24 3.2+ 3.2+ 3-4.4.4

1 Частичная поддержка. 2 Поддерживает только в Windows Vista и XP.

Как видим, самый поддерживаемый формат – TTF. За исключением ранних версий Internet Explorer и Safari все браузеры его прекрасно понимают. Поэтому вместе с ним необходимо загружать ещё две версии того же шрифта: в формате EOT для IE и в формате SVG для Safari (кстати, другие браузеры в последних версиях перестали поддерживать формат SVG). Делается это с помощью правила @font-face внутри которого пишем название гарнитуры шрифта через параметр font-family и путь к файлу шрифта через src.

01| @font-face{font-family:FontAwesome;src:url(/font/fontawesome.eot)}
02| @font-face{font-family:FontAwesome;src:url(/font/fontawesome.ttf),url(/font/fontawesome.svg)}

 Если название гарнитуры шрифта содержит пробелы, то его необходимо заключать в одинарные или двойные кавычки (например, {font-family:'Font Awesome'}).

Первым загружается файл шрифта в формате EOT для старых версий IE. Затем подгружаются ещё два файла того же шрифта в форматах TTF и SVG через запятую. Старые версии IE не понимают запятую в параметре src и будут игнорировать второе правило. Остальные браузеры прейдут ко второму правилу и оно перекроет первое, но будут использовать только шрифт формата TTF т.к. не понимают формат SVG (кроме Safari, который проходит по списку шрифтов дальше и подключает SVG-шрифт).

Дополнительный шрифт используем как обычно, задаём нужному элементу или классу свойство font-family с именем загруженного шрифта либо в стилевом файле CSS:

.icon{font-family:FontAwesome}

Либо части текста прямо на странице – <span style="font-family:FontAwesome">текст</span>.

Файловая структура CMS


css
font
      fontawesome.eot
      fontawesome.svg
      fontawesome.ttf
      fonts.css
img
inc
mod
pad
pic
.htaccess
401.php
403.php
404.php
favicon.ico
index.php
robots.txt
sitemap.xml

Иконочный шрифт Font Awesome


 Созданный Дейвом Ганди (Dave Gandy ) шрифт содержит более 600 векторных иконок, которые масштабируются без потери качества. Они хорошо смотрятся как на экранах высокого разрешения (Retina) так и на E-Ink дисплеях электронных книг. Иконкам легко менять цвет, фон и другие параметры с помощью стилевых свойств. Шрифт Font Awesome предоставляется бесплатно по лицензии SIL OFL 1.1 .

Русскоязычная версия сайта – fontawesome.ru .