Пишу, по большей части, про историю, свою жизнь и немного про программирование.

Синтаксис @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’

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

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

16 комментариев
Евгений 2011

А можно для тех кто не сильно в теме, в чём прикол с решеткой? Почему оно теперь будет работать для ие?

greli (greli.livejournal.com) 2011

Комментарий для Евгений:

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

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

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

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

Евгений 2011

А, я понял, то что после решетки -​-​ это адрес внутри страницы.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для greli.livejournal.com:

Вот она, сила повторения! :)

Ирина 2011

как узнать код svgFontName после # который?

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Ирина:

Это идентификатор шрифта, который вы хотите подключить из SVG, там их несколько может быть. Т. е. это значение атрибута id корневого тега шрифта, который вам нужен.

Catsys 2013

А разве # в 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#дальше все комент, что = ошибке
}

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Catsys:

В CSS коментарий делается вот так: /* коментарий */

Алексей 2013

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

@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;

}

Алексей 2013

Сори! Все заработало — IE 10 юникод не распознал. Пошел в заголовок.... (я)

Алексей 2014

А у меня в IE не работает((( Все 100 раз уже так прописывал, во всех браузерах работает, а в IE до 9 -нет ((

Евгений Степанищев (bolknote.ru) 2014

Комментарий для Алексей:

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

Алексей 2014

@Евгений Степанищев Сто раз его уже смотрел и пробовал. Не работает в ie и все

Евгений Степанищев (bolknote.ru) 2014

Комментарий для Алексей:

Их несколько версий.

vels 2017

вот так работает точно (в примере не работает в 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;

}

Евгений Степанищев (bolknote.ru) 2017

Комментарий для vels:

В 2K17 это уже никого не должно волновать :)