Коллекция шрифтов для вашего сайта - Шпаргалки - Статьи для веб-мастера - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Кому на Руси жить хорошо?
Всего ответов: 868
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Для Веб-Мастера » Шпаргалки

Коллекция шрифтов для вашего сайта


Вид Название Скачать
megascripts.ru BetinaScriptExt Скачать шрифт
megascripts.ru ГОСТ 2.304-81 Скачать шрифт
megascripts.ru mipgost Скачать шрифт
megascripts.ru Nokia_Cellphone Скачать шрифт
megascripts.ru Nokia_Regular Скачать шрифт
megascripts.ru NokiaSans-Bold Скачать шрифт
megascripts.ru NokiaSans Скачать шрифт
megascripts.ru JINKY Скачать шрифт
megascripts.ru Montez-Regular Скачать шрифт
megascripts.ru WCManoNegraBoldBta Скачать шрифт
megascripts.ru WCManoNegraBta Скачать шрифт
Как использовать любой шрифт на сайте

Веб-дизайнеры всегда были ограничены очень малым количеством безопасных, веб-совместимых шрифтов. Причиной этому было наличие разных шрифтов на разных компьютерах и операционных системах. CSS3 изменило это, представив свойство, которое позволяет вам использовать любой шрифт на сайте. Из этой статьи вы научитесь использовать свойство @font-face для задания задания любых шрифтов на сайте.

Загружаем шрифт на сервер

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

  • TTF — это будет наш предпочитаемый тип. Его поддерживают все современные браузеры и системы. Исключения составляют Internet Explorer до 9 версии и iPhone.
  • EOT — только Inernet Explorer.
  • WOFF — сжатый аналог TTF.
  • SVG — iPhone/iPad.

Определяем шрифт

Для того, чтобы браузер начал воспринимать загруженный шрифт, мы должны описать его и задать его адрес в CSS коде сайта. Делается это при помощи правила @font-face. С помощью font-family мы задаем название нашего нового шрифта, а с помощью src прописываем его адрес:

Код
@font-face {
  font-family: 'Montez-Regular';
  src: url('Montez-Regular.ttf');
}


Таким образом, мы задали новый шрифт 3DumbRegular, который можем использовать на веб-странице. Аналогично, вы можете использовать любые шрифты на сайте.
Кроссбраузерный font-face

Вышеописанный способ задания шрифтов будет работать во всех современных браузерах, но для обеспечения полной кроссбраузерности устанавливаемых шрифтов следует использовать все четыре описаных формата: TTF, EOT, WOFF и SVG. Для того, чтобы совместить все эти типы, нам придется использовать следующий код:

Код
@font-face {
  font-family: 'Montez-Regular';
  src: url('Montez-Regular.eot');
  src: url('Montez-Regular.eot?#iefix') format('embedded-opentype'),
  url('Montez-Regular.woff') format('woff'),
  url('Montez-Regular.ttf') format('truetype'),
  url('Montez-Regular.svg#3dumb') format('svg');
}


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

Теперь, мы можем использовать этот шрифт как стандартный:

Код
h1 { font-family: 'Montez-Regular', Arial, sans-serif;}


В результате мы получим такой результат:

megascripts.ru





Источник: http://megascripts.ru/
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:

Добавил: Гость (07.09.2014) | Просмотров: 1209 | Рейтинг: 5.0/2
Теги: статья, для сайта, инструменты, шрифт, шрифты
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Морской лайнер при сжигании каждого галлона дизельного топлива продвигается только на 6 дюймов.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта