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

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

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

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

 

В 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 . Как это возможно? Что мне не хватает?

28 Solutions collect form web for “CSS @ font-face не работает с Firefox, но работает с Chrome и IE”

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

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

security.fileuri.strict_origin_policy

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

ОПУБЛИКОВАННЫЙ САЙТ

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

   Header set Access-Control-Allow-Origin "*"   

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

Здесь можно найти приятное резюме

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

   Header set Access-Control-Allow-Origin "*"   

Вы можете попробовать явно добавить типы 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   Header set Access-Control-Allow-Origin "*"   # END REQUIRED FOR WEBFONTS 

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

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

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

У меня была точно такая же проблема. Мне пришлось создать новую папку под названием «Шрифты» и поместить ее в 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"); } 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Header set Access-Control-Allow-Origin "*"   

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

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

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

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

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

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

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

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

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

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

 < ?xml version="1.0" encoding="utf-8"?>          

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

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

 BEFORE: @font-face { font-family: "GrilledCheese BTN"; src: url(fonts/grilcb__.ttf); } AFTER: @font-face { font-family: "GrilledCheese BTN"; src: url(/fonts/grilcb__.ttf); } 

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

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

Желаю, чтобы это помогло!

Это проблема с настройкой путей вашего шрифтового шрифта. Поскольку вы не запустили путь с помощью «/», 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"; } 

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

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

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

У меня была проблема с 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/

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

это

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

становится

 body {font-family: DroidSerifRegular, serif; } 

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

  

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

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

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

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

Попробуйте это на Tool bar Запад» в « Юникод»

 View > Text Encoding > Unicode 

Если вы пытаетесь импортировать внешние шрифты, вы сталкиваетесь с одной из наиболее распространенных проблем с вашим Firefox и другим браузером. Некоторое время ваш шрифт хорошо работает в Google Chrome или в другом браузере, но не в каждом браузере.

Есть много причин для такого типа ошибок, одна из самых больших причин этой проблемы – предыдущий определенный шрифт. Вам нужно добавить ключевое слово! После конца каждой строки кода CSS, как показано ниже:

Пример:

 @font-face { font-family:"Hacen Saudi Arabia" !important; src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important; src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important; src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important; src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important; } .sample { font-family:"Hacen Saudi Arabia" !important; } 

Описание: Введите выше код в ваш CSS-файл или код здесь. В приведенном выше примере замените «Hacen Saudi Arabia» своим семейством шрифтов и замените URL-адрес в соответствии с вашим каталогом шрифтов.

Если вы введете! Важно в вашем браузере кода CSS, вы автоматически сосредоточитесь на этом разделе и переопределите ранее используемое свойство. Для получения дополнительной информации посетите: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

У меня была та же проблема и она была решена, добавив мета для контента:

   

Это происходит в Firefox и Edge, если в вашем html есть тексты Unicode.

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

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

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

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

  • Рисование текста в с помощью @ font-face не работает в первый раз
  • Подождите, пока шрифты загрузятся до рендеринга веб-страницы
  • font-face с неправильным типом MIME в Chrome
  • Amazon S3 CORS (совместное использование ресурсов для разных источников) и загрузка междоменных шрифтов Firefox
  • @ font-face EOT не загружается по HTTPS
  • Как я могу исправить проблему веб-сайта «Отсутствующий перекрестный источник ресурсов (CORS)»?
  • CSS @ font-face не работает в IE8
  • Ошибка Internet Explorer @ font-face
  • Почему мы должны включать ttf, eot, woff, svg, ... в шрифт-face
  • CSS @ font-face - что означает «src: local (« ☺ »)?
  • Нестандартные шрифты в Интернете?
  • Interesting Posts

    Постоянная настройка LLDB (в Xcode 4.3.2), чтобы не останавливаться на сигналах

    IBM WebSphere Host On-Demand (HoD): как это сделать с помощью макросов?

    Автоматический запуск Notepad ++ macro

    Java-цикл игры (живопись) замораживает мое окно

    Wuauclt.exe / detectnow / updatenow не устанавливает все обновления

    Почему некоторые адаптеры переменного тока и источники питания генерируют скулящий шум, и что я могу с этим поделать?

    Чтение из stdin flush stdout?

    Oracle: как вставить INSERT, если строка не существует

    Анонимные типы. Существуют ли какие-либо отличительные характеристики?

    Проблема с поплавками в Objective-C

    Как я могу назвать код .NET с Java?

    Android Fatal signal 11 (SIGSEGV) на 0x636f7d89 (код = 1). Как его можно отследить?

    Загрузите старую версию пакета с nuget

    Есть ли способ заставить Windows 7 индексировать общие сетевые диски?

    Как предотвратить java.lang.String.split () от создания ведущей пустой строки?

    Давайте будем гением компьютера.