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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Catsys (инкогнито)
8 апреля 2013, 14: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, 14:32, ответ предназначен Catsys

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

Алексей (инкогнито)
10 октября 2013, 23: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;
}

Алексей (инкогнито)
10 октября 2013, 23:10

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

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

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

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

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

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

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

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

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

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

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

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