URI данных во объявлении встроенного шрифта (@ font-face) нарушает IE <9 - PullRequest
Новая
       31

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

8 голосов
/ 16 августа 2011

У меня есть 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 не загружает шрифт.Если я удалю строку (или вернусь к файлу <code>.woff), IE загрузит шрифт.

Что с этим CSS смущает IE?

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

Ответы [ 2 ]

6 голосов
/ 04 ноября 2012

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

@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');
}
4 голосов
/ 16 августа 2011

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

...