URI данных во встроенном объявлении шрифта (@font-face) ломает IE ‹ 9

У меня есть файл CSS с объявлением @font-face, которое встраивает файл шрифта через URI данных:

@font-face {
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        /* ugly FF same-Origin workaround... */
        url("data:application/octet-stream;base64,d09GRgABAAAAA ... ") format('woff'),
        url('ttf/font.ttf') format('truetype'),
        url('svg/font.svg#Custom-Font') format('svg');
    }

Встраивание шрифта с URI данных приводит к тому, что IE ‹ 9 не загружает шрифт. Если я удалю строку (или верну ее, чтобы она ссылалась на файл .woff), IE загрузит шрифт.

А как насчет того, что этот CSS смущает IE?

Общие сведения. У меня есть страница, которая загружает встроенные шрифты из другого домена (CDN). К сожалению, Mozilla требует заголовка CORS (Access-Control-Allow-Origin) для встроенных шрифтов, обслуживаемых из разных доменов (злоупотребление CORS и, на мой взгляд, ужасная идея). По причинам, не зависящим от меня (бюрократия), я не могу отправить заголовок CORS в файлы шрифтов, поэтому я застрял в неоптимальной ситуации с встраиванием файла шрифта в файл CSS через URI данных.


css internet-explorer font-face embedded-fonts
person josh3736    schedule 15.08.2011    source источник
comment
@Knu: Все еще давится без комментария.   -  person josh3736    schedule 16.08.2011
comment
Я определенно понимаю преимущества загрузки шрифтов из CDN, но не могли бы вы просто разместить файл .woff локально, а все остальное в CDN?   -  person Bojangles    schedule 16.08.2011
comment
@JamWaffles: Нет. HTML обслуживается (и, следовательно, Origin) сервером приложений, к которому у меня нет доступа. (Вспомните систему, подобную CMS. Я могу редактировать HTML, но не могу размещать файлы на сервере.)   -  person josh3736    schedule 16.08.2011
comment
Просто для ясности: IE9 также требует заголовка Access-Control-Allow-Origin для междоменных шрифтов. На самом деле это хорошая идея.   -  person EricLaw    schedule 08.01.2012
comment
@EricLaw-MSFT-: Почему это хорошая идея? Кроме того, у IE9, похоже, нет проблем с загрузкой междоменного файла EOT без заголовков CORS.   -  person josh3736    schedule 10.01.2012

Ответы (2)


arrow_upward
4
arrow_downward

Вероятно, превышена максимальная длина URL.
Помните, что старые версии IE добавляют все, что находится между ? и последним '); (включая URI данных).
Таким образом, в вашем случае решением будет использование другого метода (например, Mo' Bulletproofer).

person Knu    schedule 15.08.2011
comment
Похоже, это так. Я надеялся, что IE просто проигнорирует это объявление (и вернется к src:, объявленному в строке 3), но похоже, что он выбрасывает все определение. Мне пришлось вернуться к использованию условных комментариев для загрузки таблицы стилей без URI данных в IE. - person josh3736; 24.08.2011

arrow_upward
6
arrow_downward

У меня такая же проблема. У меня сработало перемещение встроенного шрифта в другое объявление.

@font-face {
    /* Non-FF */
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        url('svg/font.svg#Custom-Font') format('svg');
}
@font-face {
    /* FF same-Origin workaround... */
    font-family: 'Custom-Font';
    src: url(data:font/truetype;charset=utf-8;base64,d09GRgABAAAAA...) format('truetype');
}
person Andrew Le Conte    schedule 04.11.2012