Хаки и Скрипты Next Generation CMS : Интерфейс, CSS : Подключение нестандартных шрифтов на сайт

irbees2008 Опубликовано - 9 - июня Интерфейс

Уровень сложности исполнения: Справочник

Вот несколько способов подключить свои шрифты на сайт
Способ 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, а кириллических шрифтов там не так уже и много…

Можешь почитать и вот эту статейку "Делаем стильные radio кнопки"

Это тоже интересно

axtynr 11.06.2013 - 05:18 Шрифт поменял, отлично смотрится)
--------------------
Ответ отirbees2008
biggrin

ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.