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

Введение
Поскольку предложение CSS Fonts Module Level 3 получило широкую поддержку во всех браузерах, некоторые вещи были значительно улучшены. Веб-шрифты, могут даже работать еще в IE5.5.

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

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

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


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


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

Далее, вы должны указать местоположение файла шрифта, который вы хотите включить в вашу страницу:

Обратите внимание на то, что вы можете включить ряд мест в этой строке, разделенных запятыми:

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

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

После того как мы внедрили шрифты к вашей веб-странице, и применить его к какому либо тексту, также просто, как с помощью font-family:


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

Есть целый ряд других опций, которые можно включить в @font-face правило:

В 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

Кросс-браузерность примерно выглядит так:

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



Источник: http://art-ucoz.ru