Вёрстка « @font-face и Internet Explorer

Необходимо использовать на странице нестандартный шрифт. Для этого существует в css правило @font-face.

Прописал в css следующее:

@font-face {
  font-family: 'NeoSansProBold'
  src: url('neosanspro-bold-webfont.eot#') format('embedded-opentype');
}

@font-face {
  font-family: 'NeoSansProBold';
  src: url('neosanspro-bold-webfont.woff') format('woff'),
     url('neosanspro-bold-webfont.ttf') format('truetype'),
     url('neosanspro-bold-webfont.svg#webfont0tApR7i9') format('svg')
}

@font-face {
  font-family: 'NeoSansProRegular';
  src: url('neosanspro-regular-webfont.eot#') format('embedded-opentype')
}

@font-face {
  font-family: 'NeoSansProRegular';
  src: url('neosanspro-regular-webfont.woff') format('woff'),
     url('neosanspro-regular-webfont.ttf') format('truetype'),
     url('neosanspro-regular-webfont.svg#webfont7ogD2pvw') format('svg')
}


И получаю в Internet Explorer 6-8 следующий глюк. Страница загружается, т.е. можно кликнуть правой кнопкой и посмотреть html-код, но в окне браузера либо ничего не отображается, либо появляются полосы при прокрутке как будто краска размазывается. Иногда отображается нормально, но достаточно обновить один раз и снова глюки.

Может есть какой-то другой способ использовать свои шрифты? Или как можно избавиться от этих глюков в ie?

1 ответов


Скорее всего из-за того, что дублируются правила для одного и того же шрифта и так, как для IE применяются eot шрифты, то правила их загрузки перетираются правилами woff, ttf и svg.
Попробуй так:

@font-face {
  font-family: 'NeoSansProRegular';
  src: url('neosanspro-regular-webfont.eot#') format('embedded-opentype'),
     url('neosanspro-regular-webfont.woff') format('woff'),
     url('neosanspro-regular-webfont.ttf') format('truetype'),
     url('neosanspro-regular-webfont.svg#webfont7ogD2pvw') format('svg')
}

На хабре (http://habrahabr.ru/blogs/typography/113136/) как раз статья недавно была, если не хотите читать, то вот тот самый "пуленепробиваемый синтаксис":

@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');
  }

Здравствуйте, вставляю код
@font-face {
font-family: 'Calibri2';
src: url('/fonts/calibri.eot?') format('eot'),
url('/fonts/calibri.woff') format('woff'),
url('/fonts/calibri.ttf') format('truetype'),
url('/fonts/calibri.svg#svgFontName') format('svg');
}
все работает, даже в ие, но не в опере.. не могу понять, что такое svgFontName и откуда мне его взять.. помогите плз. и по поводу cufon - сгенерила скрипт, и что с ним делать? подключаю и прописываю font-family - не работает
Спасибо!


Вобщем, использовал в итоге Cufon. Всем рекомендую.