@ font-face т.е. проблемы - PullRequest
Новая
       15

@ font-face т.е. проблемы

4 голосов
/ 14 марта 2012

Я пробовал несколько разных способов включить правильные шрифты в CSS.Я знаю, что мне нужна версия eot, чтобы шрифт работал в IE, но я не могу ее распознать.Я использовал font squirrel для преобразования шрифтов, и я поместил файл .eot и .otf в папку с именем «fonts». Вот мой CSS: 

@font-face {
    font-family: BebasNeue;
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.otf') format("opentype");
}

UPDATE Таким образом, благодаря предложениям, приведенным ниже, меня привели на этот сайт: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

Я использовал CSS: 

@font-face {
font-family: 'BebasNeue';
src: url('fonts/bebasneue.eot'); /* IE9 Compat Modes */
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/bebasneue.woff') format('woff'), /* Modern Browsers */
     url('fonts/bebasneue.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); /* Legacy iOS */
}

Затем я вернулся к Font Squirrel, снова загрузил обновленный набори все правильно переименовал, и все заработало.

Ответы [ 4 ]

5 голосов
/ 14 марта 2012

Для этого необходимо установить HTTP-заголовок Access-Control-Allow-Origin
См. Здесь:
IE9 блокирует загрузку веб-шрифта перекрестного происхождения

Это работает? 

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue.otf') format("opentype");
}

На Fontsquirrel они делают это следующим образом
http://www.fontsquirrel.com/fontfacedemo/bebas-neue

Загрузите комплект @ font-face оттуда 

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot');
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
1 голос
/ 14 марта 2012

Этот код должен заставить его работать .. если нет, проверьте URL вашего шрифта (если он существует). 

@font-face {
  font-family: 'BebasNeue';
  src: url('fonts/BebasNeue.eot');
  src: local('BebasNeue'), local('BebasNeue'), url('fonts/BebasNeue.eot') format('embedded-opentype');
}
0 голосов
/ 20 января 2014

Это CSS, который я имею для Bebas на нашем сайте (не Neue), но обратите внимание на URL: 

@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebas-webfont.eot');
    src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas-webfont.ttf') format('truetype'),
         url('../fonts/bebas-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
0 голосов
/ 14 марта 2012

Иногда, когда вы конвертируете тип шрифта (кроме TTF), шрифт не работает .. Попробуйте использовать шрифт TTF и конвертировать его ..

Я не испытывал этого со шрифтами TTF ... ноя сделал с другими типами шрифтов.

...