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

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

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

На моей странице destination-page.html я делаю импорт CSS так:

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

В main.css у меня есть другой импорт:

@import url("reset.css");
@import url("style.css");
@import url("type.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. Как это возможно? Что мне не хватает?

Ответы

Ответ 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 для шрифта шрифта, уродливый, но он тоже может работать.

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

Ответ 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

Ответ 3

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

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

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

Ответ 4

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

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

@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");
}

Ответ 5

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

Ответ 6

Я просто оставлю это здесь, потому что мой сотрудник нашел решение для связанной проблемы с шрифтом, не работающим с firefox, но во всем остальном.

Проблема заключалась только в том, что Firefox испортил объявление семейства шрифтов, в результате это зафиксировало его:

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

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

Ответ 7

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

Ответ 8

Для этого шрифта, в частности, вы должны использовать API шрифтов Google:

http://code.google.com/webfonts/family?family=Droid+Sans

Если вы все еще хотите использовать генератор набора FontSquirrel, используйте параметр взлома Smiley для устранения локальных проблем с шрифтами. После создания набора убедитесь, что сгенерированный файл demo.html работает в FireFox. Держу пари, что это так. Теперь загрузите его на свой сервер - я уверен, он работает там тоже, так как FontSquirrel - потрясающий.

Однако, если вы сломали сгенерированный код кода, интегрируя его в свой проект, используйте стандартные методы отладки - проверьте на 404 и продолжайте линию за строкой, пока не найдете проблему. WOFF должен определенно работать в FF, так что это хорошее место для начала.

Наконец, если это не работает, обновите FireFox. Я написал все это, полагая, что вы используете последнее; но вы не указали, какую версию вы проверяете, так что это тоже может быть вашей проблемой.

Ответ 9

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

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

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

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

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

Ответ 10

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

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

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

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

Ответ 11

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

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

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

Ответ 12

Проверяете ли вы это в локальных файлах или на веб-сервере? Файлы в разных каталогах считаются разными доменами для междоменных правил, поэтому, если вы тестируете локально, вы можете столкнуться с ограничениями между доменами.

В противном случае это, вероятно, поможет указать URL-адрес, где возникает проблема.

Кроме того, я бы предложил посмотреть консоль ошибок Firefox, чтобы узнать, не сообщается ли о синтаксических ошибках CSS или других ошибках.

Кроме того, я бы отметил, что вы, вероятно, хотите font-weight: жирным шрифтом во втором правиле @font-face.

Ответ 13

Использование правила управления доступом .htaccess Разрешить правило Origin не работает для меня, когда я столкнулся с этой проблемой.

Вместо этого в IIS в web.config вставьте блок system.webServer, показанный ниже.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Это работало как прелесть для меня. Если вам нужно ограничить доступ к определенному домену, замените * доменом.

Ответ 14

У меня была такая же проблема, что и шрифт, отображаемый в Firefox. Вот что я нашел для меня. Добавьте косую черту перед каталогом, содержащим шрифт в атрибуте url. Вот мои до и после версий:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

обратите внимание на ведущую косую черту перед "шрифтами" в URL-адресе? Это говорит о том, что браузер запускается в корневом каталоге и затем получает доступ к ресурсу. По крайней мере, для меня - проблема решена.

Ответ 15

Можете ли вы проверить с помощью firebug, если вы получаете около 404? У меня были проблемы с проходом, и я обнаружил, что расширение было таким же, но linux file.ttf отличается от file.TTF... и он работал со всеми браузерами, кроме firefox.

Пожелайте, чтобы это помогло!

Ответ 16

Это проблема с настройкой путей шрифта. Поскольку вы не запустили путь с помощью "/", Firefox попытается найти шрифт на основе пути к таблице стилей. Таким образом, Firefox ищет ваш шрифт в каталоге "root/css/font" вместо каталог "root/font". Вы можете легко исправить это, переместив папку шрифта в папку 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";
}

Ответ 17

Попробуйте это....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Ответ 18

У меня была аналогичная проблема. Демо-страница fontsquirel работала в FF, но не на моей собственной странице, хотя все файлы поступали из одного домена!

Оказалось, что я связывал свою таблицу стилей с абсолютным URL (http://example.com/style.css), поэтому FF считал, что это происходит из другого домена. Изменение моей ссылки на таблицу стилей href на /style.css вместо этого фиксировало для меня вещи.

Ответ 19

Возможно, ваша проблема - проблема именования, особенно в отношении использования (или отсутствия) пробелов и дефис.

У меня была проблема с similair, которая, по моему мнению, была исправлена путем размещения необязательных кавычек (') вокруг имен шрифтов/фамилий, но это фактически неявно фиксировало проблему именования.

Я не полностью обновляюсь в спецификации CSS, и есть (для меня) какая-то двусмысленность в том, как разные клиенты интерпретируют спецификации. Кроме того, это также похоже на соглашения об именах PostScript, но, пожалуйста, поправьте меня, если я ошибаюсь!

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

@font-face {
  font-family: "DroidSerif Regular";

Если вы считаете Droid фактическое имя семейства, из которых Sans и Serif являются членами, как, например, их дети Sans Regular или Serif Bold, то вы либо используете пробелы для конкатенации идентификаторов, либо удаляете пробелы и используете CamelCasing для familyName, и дефисы для под-идентификаторов.

Применительно к вашей декларации он выглядит примерно так:

@font-face {
  font-family: "Droid Serif Regular";

ИЛИ

@font-face {
  font-family: DroidSerif-Regular;

Я думаю, что оба должны быть совершенно законными, либо с кавычками, либо без них, но у меня был смешанный успех с другими клиентами. Может быть, однажды, у меня есть время, чтобы выяснить подробности этого/этих isseu/s.

Я нашел эту статью полезной для понимания некоторых аспектов: http://mathiasbynens.be/notes/unquoted-font-family

В этой статье содержится более подробная информация о PostScript, а также некоторые ссылки на спецификацию Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Ответ 20

Не нужно возиться с настройками, просто удалите кавычки и пробелы из семейства шрифтов:

это

body {font-family: "DroidSerif Regular", serif; }

становится этим

body {font-family: DroidSerifRegular, serif; }

Ответ 21

В моем случае я задал проблему с вставкой кода стиля шрифта

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty в заголовке на вашей странице index.html или php в теге стиля. Работает для меня!

Ответ 22

Из-за этого это один из лучших результатов Google для этой проблемы, я хотел бы добавить, что решило эту проблему для меня:

Мне пришлось удалить формат (opentype) из src шрифта, а затем он работал и в Firefox. До этого он работал отлично в Chrome и Safari.

Ответ 23

Может быть, это не из-за вашего кода, из-за вашей конфигурации Firefox.

Попробуйте это от Tool bar Western до Unicode

View > Text Encoding > Unicode

Ответ 24

Я не знаю, как вы создали синтаксис, поскольку я не использовал svg в объявлении шрифта, но Font Squirel имеет действительно хороший инструмент для создания шрифта синтаксиса с пуленепропорциональностью только из одного шрифта.

http://www.fontsquirrel.com/fontface/generator

Ответ 25

Также может быть использование URL-адреса в пути тега font-face. Если вы используете "http://domain.com", он не работает в Firefox, поэтому я меняю его на "http://www.domain.com".

Ответ 26

Моя проблема заключалась в том, что Windows назвала шрифт font.TTF и firefox expected 'font.ttf', я увидел, что после открытия моего проекта в Linux, переименовал шрифт в имя propper и все работает