Хаки и Скрипты Next Generation CMS

Подключение нестандартных шрифтов на сайт

irbees2008 irbees2008 Опубликовано - 9 - июня Интерфейс
6585 - 1
  • Уровень сложности исполнения: Справочник

Вот несколько способов подключить свои шрифты на сайт
Способ 1. Подключение шрифта в файле стилей при помощи @font-face

Код:
@font-face{
font-family:"Din"; /*указываем название шрифта*/
src:url("/fonts/Din.otf") format("opentype");
font-weight:normal; /* необязательно */
font-style:normal; /* необязательно */
}
h1 { font-family: "Din" } /*используем подключенный шрифт*/
К достоинствам данного способа относится то, что можно подключить несколько шрифтов сразу.
Для кроссбраузерности нужно скармливать разным браузерам свои файлы стилей, примерно так:

Код:
@font-face {
font-family: 'Din';
src: url('Din.eot?') format('eot'),
url('Din.woff') format('woff'),
url('Din.ttf') format('truetype'),
url('Din.svg#svgFontName') format('svg');
}
Примечание: знак “?” после Din.eot обязателен для адекватного срабатывания шрифта в IE, т.к. IE пытается использовать как адрес файла всё, что записано после первой открывающей скобки и до самой последней закрывающей скобки.

Создание разных файлов разных форматов из одного файла шрифта можно поручить сервису Font-face generator.

Минусы этого способа: далеко не все шрифты нормально проходят через Font-face generator.

Способ 2. Установка шрифтов с использованием js-библиотеки Cufon

Этот способ подключения шрифтов зависит от javascript, а значит, не у всех посетителей сайта он будет работать.

Плюсы: Единственный, на мой взгляд, плюс данного способа это возможность подключить вообще любой шрифт.

Минусы: зависимость от скриптов, и невозможность выделения и копирования текста. Хотя в некоторых случаях это может быть и плюсом, например, если нужно поставить запрет на копирование страницы).

Способ 3. Подключение нестандартных шрифтов при помощи Google Font API.

По заверениям разработчиков, корректно отображает нестандартные шрифты, даже в IE6. Минусом Google Font API является то, что шрифты можно ставить только те, которые имеются в коллекции Google Fonts, а кириллических шрифтов там не так уже и много…

Можешь почитать и вот эту статейку "Что такое gzip"

Опрос

Ваше мнение

TWIG -что это?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [10]
  • Гости: [10]
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 31
  • Генерация страницы: 0.261сек
  • Потребление памяти: 4.937 Mb 
  •   яндекс.ћетрика