Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Объявление файлов-источников

.

Объявление файлов-источников

Теперь, когда у нас имеется скелет для правил @font-face и мы даже дали им имена, пора связать эти правила со шрифтовыми файлами. Свойство src имеет несколько форматов. Кроме того, вы можете указать сразу несколько источников. В случае, если файла не окажется по указанному адресу, браузер будет последовательно перебирать все варианты, пока не найдет подходящий источник, или не закончится список. Давайте добавим к нашей декларации League Gotic еще несколько форматов:

Объявление файлов-источников

Объявление файлов-источников

В приведенном листинге указаны четыре файла со шрифтом. Первым объявляется файл формата EOT, проприетарный формат для Internet Explorer, и он же — единственный формат, поддерживаемый IE версий 4-8.

Затем мы указываем источники в форматах WOFF (Web Open Font Format), OTF (OpenType), TTF (TrueType) и SVG (Scalable Vector Graphics). И хотя большинство браузеров будет использовать один из первых трех форматов файлов, не забудьте включить SVG — изначально единственный формат, поддерживаемый iPhone.

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

Таблица 9.1. Поддержка форматов шрифтов браузерами.

Объявление файлов-источников

Добавление этих дополнительных форматов файлов дает нам уверенность в том, что будет обеспечена поддержка со стороны всех браузеров, но, к сожалению, мы сталкиваемся с проблемами в IE версий старше 9. Эти браузеры воспринимают все, что расположено между первой кавычкой первого параметра url и последней кавычкой последнего как один URL, и поэтому они не могут загрузить ни один шрифт. Тупик? Мы вынуждены выбирать между поддержкой со стороны IE и поддержкой со стороны всех остальных браузеров? Нет, к счастью, у этой проблемы есть решение. Подробно о нем можно прочитать в блоге FontSpring1; решение заключается в добавлении строки запроса к URL файла в формате EOT. Эта хитрость заставляет браузер считать оставшуюся часть свойства src продолжением строки запроса, он ищет корректный URL и загружает шрифт:

Объявление файлов-источников

В этом синтаксисе есть одна потенциальная «дыра»: если в IE9 включен так называемый «режим совместимости» (compatibility mode), то наш трюк не сработает и файл не загрузится.

В «режиме совместимости» IE9 пытается отображать страницы так, как это делают IE7 или 8. Это сделано для того, чтобы сайты, работавшие в старых браузерах, не выдавали ошибки в новом, строже соответствующем стандартам. Беда в том, что в режиме совместимости в IE9 не воспроизведена описанная выше ошибка при загрузке шрифтов EOT, поэтому приведенный выше код работать не будет. Чтобы исправить положение, надо добавить еще один URL EOT в отдельном свойстве src:

Объявление файлов-источников

Может быть, это и чрезмерная предосторожность, потому как вряд ли пользователям вашего сайта понадобится переключать браузер в режим совместимости (без чего указанная проблема проявиться не может). В качестве альтернативы можно заставить IE выйти из режима совместимости следующей директивой в заголовке документа:

Объявление файлов-источников

Еще один вариант — добавить дополнительную директиву в файл .htaccess:

Объявление файлов-источников


.

Читайте так же:
Not found