URL Font-Face CSS не работает? - PullRequest
Новая
       7

URL Font-Face CSS не работает?

3 голосов
/ 12 ноября 2011

У меня проблемы с селектором @ font-face, у меня следующее ... 

@font-face {
   font-family: 'MuseoSans-700';
      src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
      src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot?#iefix')  format('embedded-opentype'),
           url('style_159306.woff') format('woff'),
           url('style_159306.ttf') format('truetype');
    }

Только мои шрифты не отображаются, и вместо этого мне показывают мой запасной вариант, arial.

Если я вставлю URL-адрес шрифта в свой браузер, он попросит меня загрузить, чтобы я знал, что ссылки правильные, есть ли что-то, что я делаю неправильно в приведенном выше?

Я вызываю шрифт, используя ... 

h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}

Спасибо

Ответы [ 2 ]

4 голосов
/ 12 ноября 2011

Проверьте эту статью о пуленепробиваемом синтаксисе @ font-face. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Вы также не указали, в каких браузерах он работает или не работает, поэтому я предполагаю, что он не работает ни в одном из них.

1 голос
/ 12 ноября 2011

.eot для интернет-обозревателя.
Попробуйте .otf

Так что на практике вам нужно иметь оба, что-то вроде

1010 *, например * 

@font-face {
     font-family: 'MuseoSans-700';
 src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
 src: url('http://mysite.co.uk/clients/reload/Images/style_159306.otf');
}

Хороший учебник здесь: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/

Ссылка Стрелка на статью Пола Айриша также очень хороша.

...