CSS @ font-face не работает с Firefox, но работает с Chrome и IE

Question

Следующий код работает в бета-версии Google Chrome, а также в IE 7. Однако в Firefox, похоже, есть проблема с этим.Я подозреваю, что это проблема того, как мои CSS-файлы включены, потому что я знаю, что Firefox не слишком дружелюбен к междоменному импорту.

Но это всего лишь статический HTML, и нет никаких сомнений-domain.

На моем Landing-page.html я делаю импорт CSS следующим образом:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

В файле main.css у меня есть другой импорт, такой как:*

и внутри type.css у меня есть следующие объявления:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

У меня есть каталог с именем "font" в том же месте, что и type.css.Этот каталог шрифтов содержит все файлы woff / ttf / svg и т. Д.

Я в тупике. Работает в Chrome и IE, но не в Firefox .Как это возможно?Чего мне не хватает?

Answer 1

ЛОКАЛЬНО РАБОТАЕТ САЙТА (file:///)

Firefox поставляется с очень строгой политикой «file uri origin» (file:///) по умолчанию: чтобы он вел себя так же, как другие браузеры, перейдите к about:config, выполните фильтрацию по fileuri и переключите следующие параметры:

security.fileuri.strict_origin_policy

Установите значение false , и вы сможете загружать локальные ресурсы шрифтов на разных уровнях пути.

ИЗДАННЫЙ САЙТ

Согласно моему комментарию ниже, и вы испытываете эту проблему после развертывания своего сайта, вы можете попытаться добавить дополнительный заголовок, чтобы увидеть, если ваша проблема настраивается как междоменная проблема: это не должно быть, так как вы указываете относительные пути, но я бы все равно попробовал: в вашем файле .htaccess укажите, что вы хотите отправить дополнительный заголовок для каждого запрашиваемого файла .ttf / .otf / .eot:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Честно говоря, я не ожидал, что это будет иметь какое-то значение, но это настолько просто, что стоит попробовать: иначе попробуйте использовать base64 для шрифта, некрасиво, но это тоже может сработать. *

Хорошее резюме доступно здесь

Answer 2

В дополнение к добавлению следующего к вашему .htaccess: (спасибо @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Возможно, вы захотите попробовать явно добавить типы MIME webfont в файл .htaccess, например:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

В конце концов мой файл .htaccess выглядит следующим образом (для раздела, который позволяет веб-шрифтам работать во всех браузерах)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

Answer 3

У меня тоже была эта проблема. Я нашел ответ здесь: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Это пример решения, которое работает на Firefox, вам нужно добавить эту строку к шрифту face css:

src: local(font name), url("font_name.ttf");

Answer 4

У меня была точно такая же проблема. Мне пришлось создать новую папку с именем «шрифты» и поместить ее в wp_content. Я могу получить к нему доступ из своего браузера, например: http://www.example.com/wp-content/fonts/CANDY.otf

Ранее папка шрифтов находилась в том же каталоге, что и мой CSS-файл, и @ font-face выглядел следующим образом:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Как я упоминал выше, это не работало в Firefox, а только с Chrome. Теперь это работает, потому что я использовал абсолютный путь:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Answer 5

Я просто оставлю это здесь, потому что мой коллега нашел решение для связанной проблемы «font-face не работает на firefox, но везде».

Проблема была в том, что Firefox испортил декларацию семейства шрифтов, в итоге это было исправлено:

body{ font-family:"MyFont" !important; }

PS: я также использовал html5boilerplate.

Answer 6

Я бы упомянул, что у некоторых шрифтов есть проблемы в Firefox, если их имя файла содержит определенные символы. Недавно я столкнулся с проблемой со шрифтом 'Modulus', который имел имя файла '237D7B_0_0'. Удаление подчеркиваний в имени файла и обновление css для соответствия новому имени файла решили эту проблему. Другие шрифты с похожими символами не имеют этой проблемы, что очень любопытно ... возможно, ошибка в Firefox. Я бы рекомендовал сохранять имена файлов только буквенно-цифровыми символами.

Answer 7

У меня была такая же проблема. Дважды проверьте код на наличие H1, H2 или любого стиля, на который вы нацеливаетесь с помощью правила @ font-face Я обнаружил, что мне не хватает комы после font-family: 'custom-font-family' Arial, Helvetica etc Она хорошо видна во всех браузерах, кроме Firefox Я добавил кому, и она сработала.

Answer 8

Попробуйте найти объявление локального источника в директивах @font-face.

В Firefox или Google Font API есть известная ошибка, которая не позволяет использовать варианты шрифтов, если шрифт установлен локально, и соответствует определенному локальному имени:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Чтобы эффективно обойти локальную декларацию, просто сделайте из строки вашего локального источника какую-то ерунду. Общепринятым соглашением для этого является использование символа юникода смайлик ("☺"). Зачем? У Пола Айриша есть отличное объяснение в его блоге:

http://paulirish.com/2010/font-face-gotchas/#smiley

Answer 9

Одним из простых решений, о котором еще никто не упомянул, является встраивание шрифта непосредственно в файл css с использованием кодировки base64.

Если вы используете fontsquirrel.com, в Генераторе набора шрифтов выберите Режим эксперта , прокрутите вниз и выберите Кодирование Base64 в Параметры CSS - скачанный Font-Kit будет готов к подключению и воспроизведению.

Это также дает дополнительное преимущество, заключающееся в сокращении времени загрузки страницы, поскольку для этого требуется на один HTTP-запрос меньше.

Answer 10

У меня была именно эта проблема при запуске ff4 на Mac. У меня был запущен локальный сервер разработки, и мое объявление @ font-face работало нормально. Я перешел в режим реального времени, и FF «высветит» правильный тип при первой загрузке страницы, но при более глубокой навигации гарнитура по умолчанию настроена на таблицу стилей браузера.

Я нашел решение, заключающееся в добавлении следующего объявления в .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

найдено через