@ font-face, вложенный в @media, не работает в Firefox 3.5 и IE8

Question

Обновление : похоже, я попал в корреляцию, которая на самом деле не была причиной проблемы. Проблема была на самом деле несвязанной проблемой в том, как файлы CSS были развернуты. См. Мой ответ ниже для деталей.

У меня @ font-face хорошо работает в WebKit (Safari и Chrome) и Opera, но не в Firefox 3.5 или IE 8.

В соответствии с рекомендациями Google и других, я обслуживаю все статические ресурсы, включая CSS, из отдельного домена с моего основного сайта. Если я обслуживаю все из одного домена, он прекрасно работает во всех браузерах (примечание: это означает, что ответы о синтаксисе CSS бесполезны. Я уже все это выяснил и отлично работает. Это ТОЛЬКО о междоменные вопросы).

Если я обслуживаю файлы CSS и шрифтов из своего домена статических ресурсов и на сервере статических ресурсов установлен соответствующий заголовок контроля доступа (Access-Control-Allow-Origin), который должен работает, работает везде, кроме FF 3.5 и IE.

Что мне нужно сделать, чтобы сделать эту работу?

Answer 1

Лучший ответ, который я обнаружил до сих пор, в надежде, что он поможет кому-то еще:

Насколько я могу судить, ключевой вопрос заключается в том, загружается ли файл CSS (не файл шрифта) междоменным. Если я загружаю файл CSS с объявлениями @ font-face из моего домена статических ресурсов, я ничего не делаю, чтобы шрифты работали в FF или IE, независимо от заголовков контроля доступа. Если я загружаю CSS-файл из того же домена, что и страница, или просто перемещаю свои объявления @ font-face в блок стиля в заголовке страницы, он работает во всех браузерах (я даже могу загружать файлы шрифтов междоменные пока у меня установлен заголовок контроля доступа).

Подводя итог: AFAICT, FF 3.5 и IE 8 откажутся соблюдать объявления @ font-face в CSS-файле, загруженном между доменами, несмотря ни на что.

Я бы с удовольствием поправился, если кто-нибудь знает лучше и может указать, что еще я могу делать неправильно.

Действительно, я был неправ. Оказывается, CSS-компрессор, который мы использовали для развертывания ресурсов, предназначенных для обслуживания из выделенного домена, оборачивал весь кусок CSS "@media screen {...}". Я тщательно сравнил правила @ font-face, чтобы убедиться, что компрессор не связывался с ними, но никогда не проверял начало и конец CSS-файла, чтобы уловить эту упаковку. Когда я перешел на обслуживание того же домена, такого переноса не было.

Как выясняется, IE и Firefox не соблюдают объявления @ font-face, заключенные в @media: Safari, Chrome и Opera.

Вздох.

Answer 2

Я бы посоветовал посмотреть в этом посте IEBlog , который описывает, как вы делаете встраивание шрифтов в IE. Нет, это не соответствует CSS3, и нет, у вас нет другого способа сделать это в IE, используя @ font-face.

Возможно, стоит отметить, что Microsoft представила подход EOT в W3C, чтобы стандартизировать его, а W3C выразил заинтересованность в этом плане действий.

Answer 3

Эта ссылка мне очень помогла: http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

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