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

у меня есть файл 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 .woff file), IE загрузит шрифт.

как насчет этого CSS путает IE?

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

8
css embedded-fonts font-face internet-explorer

2 ответов

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

4

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

@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');
}
6