CSS @font-face не работает с Firefox, но работает с Chrome и IE
Следующий код работает как в бета-версии Google Chrome, так и в IE 7. Однако в Firefox, похоже, есть проблема с этим. Я подозреваю, что это проблема того, как мои CSS-файлы включены, потому что я знаю, что Firefox не слишком дружелюбен к междоменному импорту.
Но это всего лишь статический HTML, и здесь нет вопроса о междоменной работе.
На моей посадке-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. Как это возможно? Что мне не хватает?
30 ответов
МЕСТНО РАБОТАЮЩИЙ САЙТ (file:///)
Firefox поставляется с очень строгим "происхождением файла" (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 для шрифта, некрасиво, но это может также работать.
Хорошее резюме доступно здесь
В дополнение к добавлению следующего к вашему.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
У меня тоже была эта проблема. Я нашел ответ здесь: 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
Ранее папка fonts находилась в том же каталоге, что и мой 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");
}
У меня была такая же проблема. Дважды проверьте код на наличие H1, H2 или любого стиля, на который вы нацеливаетесь с помощью правила @font-face. Я обнаружил, что пропустил кому после font-family: 'custom-font-family' Arial, Helvetica etc Он хорошо отображался во всех браузерах, кроме Firefox. Я добавил кому, и это сработало.
Я просто оставлю это здесь, потому что мой коллега нашел решение для связанной проблемы "font-face не работает на Firefox, но везде".
Проблема была в том, что Firefox испортил декларацию семейства шрифтов, в итоге это исправили:
body{ font-family:"MyFont" !important; }
PS: я также использовал html5boilerplate.
У меня была именно эта проблема при запуске ff4 на Mac. У меня был запущен локальный сервер разработки, и мое объявление @font-face работало нормально. Я перешел в режим реального времени, и FF "высветит" правильный тип при первой загрузке страницы, но при более глубокой навигации гарнитура по умолчанию настроена на таблицу стилей браузера.
Я нашел решение, заключающееся в добавлении следующей декларации в.htaccess
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
найдено через
Я бы упомянул, что у некоторых шрифтов есть проблемы в Firefox, если их имя файла содержит определенные символы. Я недавно столкнулся с проблемой со шрифтом 'Modulus', который имел имя файла '237D7B_0_0'. Удаление подчеркиваний в имени файла и обновление css для соответствия новому имени файла решили эту проблему. Другие шрифты с похожими символами не имеют этой проблемы, что очень любопытно... возможно, ошибка в Firefox. Я бы рекомендовал сохранять имена файлов только буквенно-цифровыми символами.
Одно простое решение, о котором еще никто не упоминал, - это встраивание шрифта непосредственно в файл css с использованием кодировки base64.
Если вы используете fontsquirrel.com, в "Генераторе шрифтов" выберите экспертный режим, прокрутите вниз и выберите " Кодировать Base64" в разделе " Параметры CSS" - загруженный Font-Kit будет готов к подключению и воспроизведению.
Это также дает дополнительное преимущество, заключающееся в сокращении времени загрузки страницы, поскольку для этого требуется на один HTTP-запрос меньше.
В частности, для этого шрифта вы должны использовать Google Font API:
http://code.google.com/webfonts/family?family=Droid+Sans
Если вы все еще хотите использовать генератор комплектов FontSquirrel, используйте опцию Smiley hack, чтобы устранить локальные проблемы со шрифтами. После того, как вы сгенерировали комплект, убедитесь, что сгенерированный файл demo.html работает в FireFox. Бьюсь об заклад, это делает. Теперь загрузите его на свой сервер - готов поспорить, что он там тоже работает, так как FontSquirrel потрясающий.
Однако, если вы сломали сгенерированный код набора при интеграции его в свой проект, используйте стандартные методы отладки - проверьте на 404 и переходите построчно, пока не найдете проблему. WOFF определенно должен работать в FF, так что это хорошее место для начала.
Наконец, если ничего из этого не работает, обновите FireFox. Я написал все это, предполагая, что вы используете последнюю версию; но вы не указали, какую версию вы регистрируете, так что это тоже может быть вашей проблемой.
Попробуйте найти в вашем объявлении локального источника @font-face директивы.
В Firefox или Google Font API существует известная ошибка, которая не позволяет использовать варианты шрифтов, если шрифт установлен локально, и соответствует определенному локальному имени:
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
Чтобы эффективно нивелировать локальную декларацию, просто сделайте вашу локальную исходную строку чепухой. Общепринятым соглашением для этого является использование символа смайлик юникод ("☺"). Зачем? У Пола Айриша есть отличное объяснение в его блоге:
Вы тестируете это в локальных файлах или с веб-сервера? Файлы в разных каталогах считаются разными доменами для междоменных правил, поэтому, если вы проводите локальное тестирование, вы можете столкнуться с междоменными ограничениями.
В противном случае, вероятно, будет полезно указать URL-адрес, где возникает проблема.
Кроме того, я бы посоветовал взглянуть на консоль ошибок Firefox, чтобы узнать, есть ли какие-либо ошибки синтаксиса CSS или другие ошибки.
Кроме того, я бы отметил, что вы, вероятно, хотите использовать font-weight:bold во втором правиле @font-face.
Если вы пытаетесь импортировать внешние шрифты, вы сталкиваетесь с одной из наиболее распространенных проблем с вашим Firefox и другим браузером. Некоторое время ваш шрифт хорошо работает в Google Chrome или другом браузере, но не во всех браузерах.
Есть много причин для этого типа ошибки, одна из главных причин этой проблемы - предыдущий определенный шрифт. Вам необходимо добавить ключевое слово! Important после окончания каждой строки кода 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 (и только в Firefox). Пример:
@font-face {
font-family: code;
src: local(Monaco),
url(monaco.woff2) format("woff2"),
local(monospace);
}
Это не удастся сделать в Firefox (начиная с версии 95.0.2) и отобразит текст по умолчанию без стиля (Times), потому что последний
srcзначение соответствует имени универсального шрифта (), поддерживаемого Firefox. Все следующие значения терпят неудачу одинаково:
-
cursive -
fantasy -
monospace -
sans-serif -
serif -
system-ui
Это конечно крайний случай (и, вероятно, ошибка), но это может помочь кому-то. Вы не можете вернуться к общим шрифтам таким образом, и если по какой-то причине вам действительно нужно сослаться на локальный шрифт с тем же именем, вы должны поместить его в кавычки.
Это проблема с тем, как вы настраиваете пути вашего font-face. Поскольку вы не начинали путь с "/", 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";
}
Когда я столкнулся с этой проблемой, использование разрешения Allow Origin для управления доступом.htaccess не сработало.
Вместо этого в 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>
Это сработало как обаяние для меня. Если вам нужно ограничить доступ к определенному домену, замените * на домен.
У меня была та же проблема с получением шрифта для правильного отображения в 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? Это говорит браузеру начать с корневого каталога, а затем получить доступ к ресурсу. По крайней мере, для меня - проблема решена.
Из-за этого это один из лучших результатов Google для этой проблемы, я хотел бы добавить, что решило эту проблему для меня:
Мне пришлось удалить формат (opentype) из src шрифта-face, тогда это работало и в Firefox. До этого все работало нормально в Chrome и Safari.
У меня была та же проблема, и я решил ее, добавив мета для контента:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
Это происходит в Firefox и Edge, если у вас есть тексты Unicode в html.
Не нужно возиться с настройками, просто удалите кавычки и пробелы из семейства шрифтов:
этот
body {font-family: "DroidSerif Regular", serif; }
становится этим
body {font-family: DroidSerifRegular, serif; }
Может быть, это не из-за вашего кода, а из-за вашей конфигурации Firefox.
Попробуйте это из Tool bar Западный в Юникод
View > Text Encoding > Unicode
Можете ли вы проверить с Firebug, если у вас есть 404? У меня были проблемы с пропуском, и я обнаружил, что расширение было таким же, но linux file.ttf отличается от file.TTF... и работал со всеми браузерами, кроме Firefox.
Жаль, что это помогает!
У меня была похожая проблема. Демонстрационная страница fontsquirel работала в FF, но не на моей собственной странице, хотя все файлы были из одного домена!
Оказалось, что я связывал свою таблицу стилей с абсолютным URL-адресом (http://example.com/style.css), поэтому FF подумала, что это из другого домена. Меняя мою ссылку на таблицу стилей href на /style.css, я исправил некоторые вещи.
Попробуй это....
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
Firefox позволяет полностью отключить веб-шрифты. Так было или со мной.
Чтобы включить его, перейдите в «Настройки»> «Содержимое»> «Дополнительно» и установите флажок.
В моем случае я решил проблему со вставкой кода стиля font-face
<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, в теге style. Работает для меня!
Возможно, ваша проблема связана с именами, особенно в отношении использования (или нет) пробелов и дефисов.
У меня была проблема с similair, которую я решил исправить, поместив необязательные кавычки (') вокруг имени шрифта / фамилии, но это фактически неявно исправило проблему с именами.
Я не совсем в курсе CSS-спецификации, и есть (на мой взгляд) некоторая двусмысленность в том, как разные клиенты интерпретируют спецификации. Кроме того, это также связано с соглашениями об именах PostScript, но, пожалуйста, исправьте меня, если я ошибаюсь!
В любом случае, насколько я понимаю, ваша декларация использует смесь двух возможных разных вкусов.
@font-face {
font-family: "DroidSerif Regular";
Если вы считаете Droid фактическим именем семьи, членами которого являются Sans и Serif, как, например, их дочерние элементы Sans Regular или Serif Bold, то вы либо используете пробелы везде для объединения идентификаторов, либо ИЛИ удаляете пробелы и используете CamelCasing для имя семьи и дефисы для подидентификаторов.
Применительно к вашей декларации это будет выглядеть примерно так:
@font-face {
font-family: "Droid Serif Regular";
ИЛИ ЖЕ
@font-face {
font-family: DroidSerif-Regular;
Я думаю, что оба должны быть совершенно законными, с кавычками или без них, но я имел смешанный успех с разными клиентами. Может быть, однажды у меня будет время, чтобы выяснить детали этого / этих вопросов.
Я нашел эту статью полезной для понимания некоторых аспектов: http://mathiasbynens.be/notes/unquoted-font-family
В этой статье есть некоторые дополнительные подробности о PostScript, а также некоторые ссылки на спецификацию Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
Я не знаю, как вы создали синтаксис, поскольку я использовал svg в объявлении шрифта, но у Font Squirel есть действительно хороший инструмент для создания пуленепробиваемого синтаксиса font-face только из одного шрифта.
Также может быть использование URL в пути тега font-face. Если вы используете "http://domain.com", он не работает в Firefox, для меня его изменение на "http://www.domain.com" работает.
Моя проблема заключалась в том, что Windows назвала шрифт "font.TTF", а Firefox ожидал "font.ttf". Я увидел, что после открытия моего проекта в Linux переименовал шрифт в propper name и все работает