Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Как Использовать Кросс-Браузерность Веб-Шрифтов, Часть 1

Дата добавления: 15.12.2013 - 21:01
Добавил: Buger
Количество просмотров: 572
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Как Использовать Кросс-Браузерность Веб-Шрифтов, Часть 1
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Введение
Поскольку предложение CSS Fonts Module Level 3 получило широкую поддержку во всех браузерах, некоторые вещи были значительно улучшены. Веб-шрифты, могут даже работать еще в IE5.5.

Давайте рассмотрим веб-шрифты, подробнее.

1. Правило @font-face

Вставка блока в CSS, описывающие веб-шрифт, который вы хотите встроить на страницу.
Эта информация заворачивается внутрь блока @font-face, например, так:
Код
@font-face {
    ...
}


Это должно находиться в верхней части таблицы стилей CSS: для того, чтобы убедиться, что шрифт подключен и стал доступен прежде чем пытаться применить его к любому тексту.
Во-первых, мы включили font-family, для определения шрифта в CSS.
Это может быть практически любое название, которое вам нравится:
Код
@font-face {
  font-family: Abril;
}


Примечание: Abril Fatface шрифты можно найти на fontsquirrel.com, отличный источник бесплатных веб-шрифтов.

Далее, вы должны указать местоположение файла шрифта, который вы хотите включить в вашу страницу:
Код
@font-face {
  font-family: 'Abril Fatface Regular';
  src: url("AbrilFatface-Regular.otf");
}

Обратите внимание на то, что вы можете включить ряд мест в этой строке, разделенных запятыми:
Код
src: local('Abril Fatface Regular'), url("AbrilFatface-Regular.otf"), url("AbrilFatface-Regular.eot");

Браузер проходит в порядке выбора, и находит первый, который работает для него.
Далее, мы подключаем ссылку Открытого Типа формата шрифта (Open Type format font), тогда, наконец, мы содержим встроенный Open Type format для использования в старых версиях IE.
Имейте в виду, что вы не можете указать шрифт на другой домен.
Это неотъемлемая часть, которая теперь должна быть пригодна для использования шрифта на нашей веб-странице.

2. Стандартный font-family

После того как мы внедрили шрифты к вашей веб-странице, и применить его к какому либо тексту, также просто, как с помощью font-family:
Код
h1 {
  font-size: 8em;
  font-family: 'Abril Fatface Regular', sans-serif;
}


Другие @font-face опции

Есть целый ряд других опций, которые можно включить в @font-face правило:
Код
@font-face {
  font-family: 'Abril Fatface';
  src: url("AbrilFatface.otf");
  font-weight: bold;
  font-style: italic;
  font-stretch: condensed;
  unicode-range: U+0026;
}

В font-* дескрипторе применяются для использования, когда много разных вариантов шрифта доступных в одном файле.
Вот, например, указывается, что мы хотим использовать полужирный, курсив, сокращенный вариант шрифта, если он доступен, а не загружать всю партию браузером.
В unicode-range дескрипторе указываются глифы внутри файла шрифта, который вы хотите использовать.
U+0026 unicode для амперсанда (&), что означает, что только в этом случае амперсанд будет загружать из этого файла шрифт для использования на странице.
Это хороший метод для экономии пропускной способности сети, когда вы хотите использовать только очень специфический набор символов в шрифте.

Кросс-браузерная реальность
Реальность получения веб-шрифтов для работы в различных браузерах будет немного отличаться.
Разные браузеры поддерживают немного другой набор форматов шрифтов, поэтому вам необходимо предоставить набор альтернатив.

  • Web Open Font Format (.woff): Для всех современных браузеров
  • Встроенные Open Type: Для поддержки старых версий Internet Explorer (IE< =8)
  • SVG-шрифты: Для более старых версий iOS сафари (3.2-4.1)
  • Truetype шрифты: Для более старых версий по умолчанию браузера android
Кросс-браузерность примерно выглядит так:
Код
font-face {
  font-family: 'abril_fatfaceregular';
  src: url('abrilfatface-regular-webfont.eot');
  src: url('abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('abrilfatface-regular-webfont.woff') format('woff'),
       url('abrilfatface-regular-webfont.ttf') format('truetype'),
       url('abrilfatface-regular-webfont.svg#abril_fatfaceregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Это не очень красиво, но, к счастью, вам не нужно создавать ее самостоятельно:
Интернет-ресурсы, такие как fontsquirrel.com имеет легкий в использовании генератор, который принимает файлы шрифта, и сможет создать альтернативный формат файлов и CSS который вам нужен.



Источник: http://art-ucoz.ru
Добавлять комментарии могут только зарегистрированные пользователи.