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

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

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

Евгений (инкогнито)
4 февраля 2011, 15:19

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

greli (greli.livejournal.com)
4 февраля 2011, 16:10, ответ предназначен Евгению

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

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

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

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

Евгений (инкогнито)
4 февраля 2011, 16:21

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

bolk (bolknote.ru)
4 февраля 2011, 18:00, ответ предназначен greli (greli.livejournal.com):

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

Ирина (инкогнито)
12 апреля 2011, 14:22

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

bolk (bolknote.ru)
12 апреля 2011, 22:40, ответ предназначен Ирине

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

Catsys (инкогнито)
8 апреля 2013, 15:01

А разве # в 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)
8 апреля 2013, 15:32, ответ предназначен Catsys

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

Алексей (инкогнито)
11 октября 2013, 00:08

Что то у меня не работает ((
@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 октября 2013, 00:10

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

Алексей (инкогнито)
4 октября 2014, 14:58

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

Евгений Степанищев (bolknote.ru)
5 октября 2014, 16:43, ответ предназначен Алексею

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

Алексей (инкогнито)
7 октября 2014, 11:29

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

Евгений Степанищев (bolknote.ru)
7 октября 2014, 17:33, ответ предназначен Алексею

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

vels (инкогнито)
9 августа 2017, 11:32

вот так работает точно (в примере не работает в 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 (bolknote.ru)
9 августа 2017, 21:09, ответ предназначен vels

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

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)