@ font-face с URI данных в IE8 не работает

Question

Я не могу получить свой пользовательский шрифт в Internet Explorer 8, закодированном с base64 в URI данных. Вот мой fon-face css:

@font-face { 
    font-family: 'myfont'; 
    src: url('data:application/x-font-woff;base64,[BASE_64_HERE]'), 
     url('data:font/eot;base64,[BASE_64_HERE]') format('embedded-opentype'); 
} 

Он отлично работает в Chrome, но не работает в IE8.

Answer 1

Я уверен, что ie8 не поддерживает несколько объявлений src. Сказав это, я делаю то же самое:

@font-face { 
    font-family: 'myfont'; 
    src: url('data:font/eot;base64,[BASE_64_HERE]') format('embedded-opentype'); 
} 

и все еще не работает в ie8. Я думаю, может быть, проблема синтаксиса? Надеюсь, кто-то еще может помочь.

Answer 2

«[data-uris] провалился в IE 7/8, когда я попытался применить его к шрифту тела, используя несколько файлов шрифтов для разных весов и стилей. Решение, которое я нашел, - это просто установить шрифт-вес и font-style в обоих @ font-face-объявлениях.

источник: https://medium.com/what-i-learned-building/2c1de247c94e

Answer 3

Традиционная @font-face декларация IE8 является:

@font-face { 
    font-family: 'MyFontFamily'; 
    src: url('myfont-webfont.eot'); 
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf') format('truetype'), 
     url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Если вы хотите использовать встроенные URI, вы должны разделить @font-face на две декларации:

@font-face { 
    font-family: 'MyFontFamily'; 
    src: url('myfont-webfont.eot'); 
} 
@font-face { 
    font-family: 'MyFontFamily'; 
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url(data:...) format('woff'), 
     url(data:...) format('truetype'), 
     url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Убедитесь, что все стили шрифтов (font-style или font-weight) дублируются как на @font-face деклараций.

См http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Answer 4

Есть некоторые ограничения для использования URIs данных с ie8. Согласно caniuse.com:

«Поддержка ограничена изображениями и связанными ресурсами, такими как файлы CSS, а не файлы HTML или JS. Максимальная длина URI составляет 32 КБ».