Синтаксис @font-face, совместимый с IE

Без лишних вступлений:

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

У IE (до 9-й версии) был баг в обработке атрибута src, все дальнейшие атрибуты IE воспринимал как часть URL, пытался на него идти и получал 404.

Посмотрите на третью строку, видите там „#“? IE по-прежнему считает остальную часть частью URL, но URL теперь выглядит как-то так:

myfont-webfont.eot#’) format(’eot’)…и так далее…format(’svg’

Вот такой простой и красивый трюк.

Добавлено позднее: не все поняли. После решётки в адресе страницы идёт идентификатор внутри страницы. Эта часть на сервер на отсылается.

программированиеiecss

Комментарии 16

Евгений № 1
А можно для тех кто не сильно в теме, в чём прикол с решеткой? Почему оно теперь будет работать для ие?
greli (greli.livejournal.com) № 2
У IE (до 9-й версии) был баг в обработке атрибута src, все дальнейшие атрибуты IE воспринимал как часть URL, пытался на него идти и получал 404.

Посмотрите на третью строку, видите там „#“? IE по-прежнему считает остальную часть частью URL, но URL теперь выглядит как-то так:

myfont-webfont.eot#') format('eot')…и так далее…format('svg'

Вот такой простой и красивый трюк.
Ирина № 5
как узнать код svgFontName после # который?
Евгений Степанищев (bolknote.ru) автор № 6
Это идентификатор шрифта, который вы хотите подключить из SVG, там их несколько может быть. Т.е. это значение атрибута id корневого тега шрифта, который вам нужен.
Catsys № 7

А разве # в css не символ комментария, т.е. по идее мы получим

@font-face {

font-family: 'MyFontFamily';
src: url('myfont-webfont.eot#дальше все комент, что = ошибке
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#дальше все комент, что = ошибке
}

Алексей № 9

Что то у меня не работает ((

@font-face {

font-family: 'Conv_terminator';
src: url('fonts/terminator.eot#') format('eot');
src: url('fonts/terminator.woff') format('woff'),
url('fonts/terminator.ttf') format('truetype'),
url('fonts/terminator.svg') format('svg');
font-weight: normal;
font-style: normal;

}
Алексей № 11
А у меня в IE не работает((( Все 100 раз уже так прописывал, во всех браузерах работает, а в IE до 9 -нет ((
Евгений Степанищев (bolknote.ru) автор № 12
Комментарий для Алексей:

Поищите в интернете «Bulletproof @font-face Syntax».
vels № 15

вот так работает точно (в примере не работает в ie)

@font-face {

font-family: 'FRABK';
src: url('fonts/FRABK.eot');
src: url('fonts/FRABK.eot?#iefix') format('embedded-opentype'),
url('fonts/FRABK.woff') format('woff'),
url('fonts/FRABK.ttf') format('truetype'),
url('fonts/FRABK.svg#FRABK') format('svg');
font-weight: normal;
font-style: normal;

}