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

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

irbees2008 irbees2008 Опубликовано - 9 - июня Интерфейс
7279 - 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, а кириллических шрифтов там не так уже и много…

Можешь почитать и вот эту статейку "флеш облако из фотографий"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 4374 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [5]
  • Гости: [4]
  • Поисковики: [1] Google
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 32
  • Генерация страницы: 0.272сек
  • Потребление памяти: 5.186 Mb 
  •   Яндекс.Метрика