Синтаксис @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’
Вот такой простой и красивый трюк.
Добавлено позднее: не все поняли. После решётки в адресе страницы идёт идентификатор внутри страницы. Эта часть на сервер на отсылается.
А можно для тех кто не сильно в теме, в чём прикол с решеткой? Почему оно теперь будет работать для ие?
Комментарий для Евгений:
У IE (до 9-й версии) был баг в обработке атрибута src, все дальнейшие атрибуты IE воспринимал как часть URL, пытался на него идти и получал 404.
Посмотрите на третью строку, видите там „#“? IE по-прежнему считает остальную часть частью URL, но URL теперь выглядит как-то так:
myfont-webfont.eot#’) format(’eot’)…и так далее…format(’svg’
Вот такой простой и красивый трюк.
А, я понял, то что после решетки -- это адрес внутри страницы.
Комментарий для greli.livejournal.com:
Вот она, сила повторения! :)
как узнать код svgFontName после # который?
Комментарий для Ирина:
Это идентификатор шрифта, который вы хотите подключить из SVG, там их несколько может быть. Т. е. это значение атрибута id корневого тега шрифта, который вам нужен.
А разве # в css не символ комментария, т. е. по идее мы получим
font-family: ’MyFontFamily’;
src: url(’myfont-webfont.eot#дальше все комент, что = ошибке
url(’myfont-webfont.woff’) format(’woff’),
url(’myfont-webfont.ttf’) format(’truetype’),
url(’myfont-webfont.svg#дальше все комент, что = ошибке
}
Комментарий для Catsys:
В CSS коментарий делается вот так: /* коментарий */
Что то у меня не работает ((
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;
Сори! Все заработало — IE 10 юникод не распознал. Пошел в заголовок.... (я)
А у меня в IE не работает((( Все 100 раз уже так прописывал, во всех браузерах работает, а в IE до 9 -нет ((
Комментарий для Алексей:
Поищите в интернете «Bulletproof @font-face Syntax».
@Евгений Степанищев Сто раз его уже смотрел и пробовал. Не работает в ie и все
Комментарий для Алексей:
Их несколько версий.
вот так работает точно (в примере не работает в ie)
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;
Комментарий для vels:
В 2K17 это уже никого не должно волновать :)