Как использовать нестандартный шрифт на сайте?

Автор: Илья Остапенко /

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

Как использовать нестандартный шрифт на сайте?

Нестандартные шрифты, это те, которых нет в стартовом пакете операционной системы. Другими словами это самодельные шрифты или скачанные в интернете и т.д. Стандартными можно назвать такие шрифты, как Tahoma, Verdana, Arial, Times New Roman и т.д. То есть, те, которые есть на любом компьютере (если Вы их не удалили). Как вы уже поняли, то в этой статье я буду говорить только о нестандартных. Итак, поехали.

Использовать нестандартные шрифты, как основные, не правильно, на мой взгляд, они больше подходят для небольших блоков на сайте (шапка, горизонтальное меню, сайдбары).  Установить их стандартным способом нельзя, вернее можно, у вас на компьютере они откроются, а других нет. Все потому что на вашем компьютере они установлены, а посетителей соответственно нет. Ну, а если посетитель увидит кракозябры на сайте, то курсор его мышки, быстро потянется к кнопке «Х».

Такую проблему можно обойти двумя способами: все, что нужно вывести нестандартным шрифтом, сделать в виде картинки или же подключить нужный шрифт к сайту. С первым вариантом все понятно, поэтому в этой статье я рассмотрю только второй.

 

Font-Face – установка нестандартных шрифтов на сайт

В CSS есть такие специальные @ правила. Так вот одно из них, и позволяет подключить шрифт к вашему сайту. Посмотрите внимательно на код.

Для тех, кому код не понятен объясняю. Мы используем правило @font-Face, в котором пишем название для нашего шрифта (terminator), а так же указываем ссылку с его месторасположением на сайте. Далее для всех тегов div устанавливаем шрифт terminator. Вроде все легко и просто, так как сделать фиксированный фон на сайте.

Но, не так все прекрасно, как кажется, ведь неспроста, же в некоторых случаях используются картинки вместо шрифтов. Дело в том, что у этого метода есть два недостатка.

Шрифт, который подключаем с сайта, увеличит время его загрузки, а шрифты могут весить от 100 килобайт, до 10 мегабайт. Бывает даже и больше.

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

 

ПЛЮСЫ

- Три режима конвертации, Easy, Optimal, Expert.

- Конвертирует во всевозможные форматы шрифтов.

- Создает CSS файл с готовым кодом для вставки на сайт.

- Большой набор опций отображения шрифта.

МИНУСЫ

- Не работает с лицензионными (защищенными) шрифтами.

 

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

 

Подводя итог

На мой взгляд, @font-Face позволит Вам сделать свой сайт не таким как у всех, а более красивым и привлекательным. Да, есть минусы в виде, слабой кроссбраузерности, но будем надеяться, что это временная проблема.

Надеюсь, моя статья «как использовать нестандартный шрифт на сайте» поможет Вам украшении вашего сайта, а возможно вы уже, параллельно читая ее, украсили свой сайт. Очень интересно ваше мнение о статье, а так же примеры ваших сайтов с использованием font-Face.

Комментарии к записи


    Serg33
La dedicacion de la etaci.org al campo de la salud

Оставить комментарий

Это не спам.