@ font-face не сотрудничает в Firefox - PullRequest
Новая
       26

@ font-face не сотрудничает в Firefox

3 голосов
/ 26 января 2011

Я перепробовал множество вещей, включая нажатие на ВСЕ вопросы, связанные с моим вопросом (их было много!), И перепробовал все их «решения», но ни одно из них не помогло мне. Я попытался обернуть файл .eot в условный оператор IE, но это тоже не сработало. Кто-то сказал, что @ font-face не будет работать в Firefox, если вы не размещаете файл на своем собственном сервере ... Или что-то в этом роде. В любом случае, зайдите здесь , чтобы увидеть сравнение всех других браузеров с Firefox. Пожалуйста, не бей! Я действительно попробовал каждое решение, которое Google и stackoverflow могли предложить. (Помните, что это тема Tumblr, и все файлы / изображения должны размещаться через Tumblr uploader .)

Заранее спасибо!

Кроме того, вот код, который я использовал: 

<!--[if IE]>
<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
}
</style>
<![endif]-->

<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('S'), 
     local('S'), 
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
</style>

Я попытался перейти к: конфигурации в Firefox и переключению security.fileuri.strict_origin_policy на false, но это не сработало. Кроме того, мне нужен способ, чтобы все пользователи, которые просматривают мою тему или используют ее, также могли просматривать шрифт, и по умолчанию для него установлено значение true.

Ответы [ 4 ]

3 голосов
/ 27 января 2011

Edit:

Вот решение: Междоменный обходной путь

Firefox не любит междоменное встраивание.

1 голос
/ 26 января 2011

Эрл, я не хочу быть тем, кто скажет тебе это, но твоя проблема не в твоем правиле @ font-face. По крайней мере, не было, когда я проверил ваш сайт. Когда вы используете семейство шрифтов CSS, вы должны убедиться, что между каждым шрифтом в выбранном вами стеке есть запятая. Ваш селектор h6 был: 

h6 {font-size:36px; font-family: 'S' sans-serif;}

Должно быть: 

h6 {font-size:36px; font-family: 'S', sans-serif;}

Дайте это попробовать, и я думаю, что это сработает для вас. Просто убедитесь, что все ваши стеки семейства шрифтов имеют запятые между несколькими шрифтами. Firefox немного более строг с анализом технически некорректного CSS; Firefox просто игнорирует это. Похоже, именно поэтому у вас проблема, а не ваш @ font-face.

0 голосов
/ 16 мая 2011

У меня была похожая проблема, она работала везде, но не в Firefox4 на Mac.Я объявил @ font-face-Stuff внутри другого блока @media (загружая только шрифты для немобильных устройств) - и именно это вызвало ошибку.

Это не сработало: 

@media sth... {

  @font-face {
    ...
  }

}

Это сработало: 

@font-face {
  ..
}

@media sth... {

}
0 голосов
/ 26 января 2011

Я не совсем убежден в вашем правиле @ font-face. Можете ли вы скопировать следующее и посмотреть, какая (если таковая имеется) разница? Просто чтобы очистить вещи. 

@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('☺'),
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}

Это просто очищает пару мелких вещей. Я бы также предложил изменить имя вашего шрифта на что-то отличное от «S»; "Zegoe Light", например.

Ivo Wetzel верен из ваших комментариев, хотя, это может быть проблемой с тем, как Tumblr подает носители с неизвестными расширениями файлов.

...