@ font-face не будет загружаться в Firefox (5.01) на Wordpress-сайте - PullRequest
Новая
       6

@ font-face не будет загружаться в Firefox (5.01) на Wordpress-сайте

0 голосов
/ 03 августа 2011

У меня проблема с сайтом Wordpress. @ Font-face работает в Safari и Chrome, но не в Firefox 5.01. Я использовал генератор шрифтов Fontsquirrel (http://www.fontsquirrel.com/fontface/generator), который генерирует шрифты ttf, woff, eot и svg.

Проблема, похоже, связана с сайтом Wordpress. Я протестировал простой HTML-сайт с тем же шрифтом, а затем Firefox загружает и отображает шрифт .

Я читал, что проблема может быть связана с CMD. Я также слышал, что Firefox по соображениям безопасности загружает шрифты только в том случае, если вы жестко закодировали точный URL (http://www.koodoz.com.au/klog/font-face-woe-with-wordpress-firefox/), а не ссылку php в Wordpress.

php wordpress сайт, не работающий: ссылка. Сайт html, работающий: ссылка

Шрифт не загружается в Firefox. Есть идеи?

Ответы [ 3 ]

4 голосов
/ 03 августа 2011

Из консоли ошибок Firefox: 

Warning: @font-face rule not allowed within @media or @-moz-document rule.
Source File: http://ellenz.se/wp-content/themes/BLANK-Theme/style.css?1312303802
Line: 18

И действительно, грамматика CSS не позволяет вкладывать @ -rules, хотя ходили разговоры о возможном ослаблении этого ограничения. WebKit просто нарушает спецификацию здесь.

1 голос
/ 03 августа 2011

Может быть, вам стоит взглянуть на API шрифтов Google .Он довольно прост в использовании и даже работает с IE6.

Просто выберите шрифт из Google Font Directory , и тогда вам нужно только импортировать его в свой HTML-заголовок (доthe css): 

<link rel="stylesheet" 
      type="text/css" 
      href="http://fonts.googleapis.com/css?family=Font+Name">

После этого вы можете использовать его в своем css в качестве рваного шрифта: 

body {
  font-family: 'Font Name', serif;
  font-size: 48px;
}
1 голос
/ 03 августа 2011

FF Firebug dom инспектор показывает, что стиль body вашей "неработающей" страницы переопределяется строкой 26 вашего файла reset.css.Казалось бы, FF рассматривает @import url как применение ПОСЛЕ остальной части вашего style.css файла.

...