CSS @font-face не работает с Firefox, но работает с Chrome и IE
следующий код работает в Google Chrome beta, а также IE 7. Тем не менее, Firefox, похоже, имеет проблемы с этим. Я подозреваю, что это проблема того, как включены мои CSS-файлы, потому что я знаю, что Firefox не слишком дружелюбен к междоменному импорту.
но это все просто статический HTML, и нет вопроса о междоменном.
на моей целевой странице.html я делаю импорт CSS так:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
в главном.css у меня есть другой импорт, как Итак:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
и внутри типа.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; }
у меня есть каталог под названием "шрифт" в том же месте, что и тип.стиль CSS. Этот каталог шрифтов содержит все файлы woff/ttf / svg и т. д.
Я в тупике на этом. он работает в Chrome и IE, но не на Firefox. Как это возможно? Что я упускаю?
28 ответов
ЛОКАЛЬНЫЙ ЗАПУСК САЙТА (file:///)
Firefox поставляется с очень строгим "файл uri origin" (file:///) политика по умолчанию: чтобы она вела себя так же, как и другие браузеры, перейдите в about:config, фильтр fileuri и включите следующий параметр:
security.fileuri.strict_origin_policy
установить false и вы должны иметь возможность загружать локальные ресурсы шрифтов на разных уровнях пути.
ОПУБЛИКОВАННЫЙ САЙТ
согласно моему комментарию ниже, и вы испытываете эту проблему после развертывания вашего сайта, вы можете попытаться добавить дополнительный заголовок, чтобы увидеть, настраивается ли ваша проблема как проблема с кросс-доменом: это не должно, так как вы указываете относительные пути, но я бы все равно попробовал: в вашем .файл htaccess, укажите, что вы хотите отправить дополнительный заголовок для каждого .ТЦФ./otf/.запрашиваемый файл eot:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
честно говоря, я бы не ожидал, что это будет иметь какое-либо значение, но это так просто, что стоит попробовать: иначе попробуйте использовать кодировка base64 для вашего шрифта шрифта, уродливый, но он может работать тоже.
хорошее резюме доступно здесь
В дополнение к добавлению следующего к вашему .откройте файл. htaccess: (спасибо @Мануэль)
<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 файл выглядит так (для раздела, который позволяет webfonts работать во всех браузерах)
# 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
ранее папка шрифтов находилась в том же каталоге, что и мой 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");
}
Я просто оставлю это здесь, потому что мой сотрудник нашел решение для связанной проблемы "шрифт-лицо не работает на 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. Я добавил кому, и это сработало.
для этого шрифта, в частности, вы должны использовать Google Font API:
http://code.google.com/webfonts/family?family=Droid+Sans
Если вы все еще хотите использовать генератор набора FontSquirrel, используйте опцию Smiley hack для устранения локальных проблем шрифта. После того, как вы сгенерировали комплект, проверьте, что сгенерированная демонстрация.html работает в FireFox. Я уверен в этом. Теперь загрузите его на свой сервер-бьюсь об заклад, он там тоже работает, так как FontSquirrel потрясающий.
однако, если вы сломали сгенерированный код набора при интеграции его в свой проект, используйте стандартные методы отладки -- проверьте 404 и идите строка за строкой, пока не найдете проблему. WOFF определенно должен работать в FF, так что это хорошее место для начала.
наконец, если ничего из этого не работает, обновите Firefox. Я написал все это, предполагая, что вы используете последнюю версию; но вы не указали, какую версию вы проверяете, так что это может быть вашей проблемой тоже.
попробуйте nerfing объявление локального источника в вашем @font-face директивы.
в Firefox или Google Font API есть известная ошибка, которая предотвращает использование вариантов шрифтов, если шрифт установлен локально, и соответствует определенному локальному имени:
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
чтобы эффективно nerf локальное объявление, просто сделайте свою локальную исходную строку какой-то ерундой. Большей частью принятое соглашение для этого-использовать символ Юникода смайлика ("☺"). Почему? У пола Айриша есть отличное объяснение в своем блоге:
У меня была именно эта проблема с запуском ff4 на mac. У меня был локальный сервер разработки, и моя декларация @font-face работала нормально. Я мигрировал в live, и FF "мигал" правильный тип при загрузке первой страницы, но при навигации глубже шрифт по умолчанию использовался в таблице стилей браузера.
Я нашел решение в добавлении следующего объявления .реврайт
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
нашел via
одно простое решение, о котором еще никто не упоминал, - это встраивание шрифта непосредственно в файл css с помощью кодировки base64.
Если вы используете fontsquirrel.com, в генераторе набора шрифтов выберите режим эксперта прокрутите вниз и выберите Кодировка Base64 под параметры CSS - загруженный набор шрифтов будет готов к подключению и воспроизведению.
Это также имеет преимущество сокращения времени загрузки страницы, потому что он требует меньше запрос http.
вы тестируете это в локальных файлах или с веб-сервера? Файлы в разных каталогах считаются разными доменами для междоменных правил, поэтому, если вы тестируете локально, вы можете нажать междоменные ограничения.
в противном случае, это, вероятно, поможет указать на URL-адрес, где возникает проблема.
кроме того, я бы предложил посмотреть на консоль ошибок Firefox, чтобы узнать, сообщаются ли какие-либо синтаксические ошибки CSS или другие ошибки.
кроме того, я бы отметил вероятно,вы хотите шрифт-вес: полужирный во втором правиле @font-face.
использование an .htaccess Access Control Allow Origin rule не работал для меня, когда я столкнулся с этой проблемой.
вместо этого в IIS в интернете.config вставьте систему.блок веб-сервера, показанный ниже.
<?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-адресе? Это говорит браузеру начать с корневого каталога, а затем получить доступ к ресурсу. По крайней мере для меня - проблема решена.
можете ли вы проверить с firebug, если вы получите 404? У меня были проблемы с проходом, и я обнаружил, что расширение было таким же, но файл linux.ttf отличается от файла.ТЦФ... и он работал со всеми браузерами, кроме firefox.
желаю, чтобы это помогло!
это проблема с тем, как вы настройка шрифта по пути. Поскольку вы не начали путь с"/", Firefox попытается найти шрифт на основе пути, в котором находится таблица стилей. Таким образом, Firefox ищет ваш шрифт в каталоге "root/css/font" вместо каталога "root/font". Вы можете легко исправить это, переместив папку шрифтов в папку css или добавив a / в начало ваших путей шрифта.
попробуйте это:
@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, которую я думал, что исправил, разместив необязательный элемент кавычки ( ' ) вокруг font-/family-names, но это фактически неявно исправило проблему именования.
Я не совсем в курсе спецификации CSS, и есть (по крайней мере, для меня) некоторая двусмысленность в том, как разные клиенты интерпретируют спецификации. Кроме того, это также кажется связанным с соглашениями об именах PostScript, но, пожалуйста, исправьте меня, если я ошибаюсь!
В любом случае, как я понимаю сейчас, ваша декларация использует смесь двух возможных различных ароматов.
@font-face {
font-family: "DroidSerif Regular";
Если ты дроид фактическая фамилия, из которых Sans и засечками являются членами, как, например, их детей Без Регулярного или Засечек Bold, тогда вы либо используете пробелы everyhere для объединения идентификаторов, либо удаляете пробелы и используете 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; }
в моем случае я sloved проблема с вставкой кода стиля шрифта
<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 в заголовке вашего индекса.html или php страница, в теге style. Работает на меня!
из-за этого это один из лучших результатов Google для этой проблемы, я хотел бы добавить, что решило эту проблему для меня:
Мне пришлось удалить формат (opentype) из src шрифта, тогда он работал и в Firefox. До этого он отлично работал в Chrome и Safari.
может быть, это не из-за вашего кода, это из-за вашей конфигурации Firefox.
почем Tool bar Западный to Unicode
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" на font-family и замените url в соответствии с вашим каталогом шрифтов.
Если вы входите !важно в вашем браузере CSS код автоматически фокусироваться на этом разделе и переопределить ранее используемое имущество. Для более подробной информации посетите: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
У меня была такая же проблема и я решил ее, добавив мета для контента:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
это происходит в Firefox и Edge, если у вас есть тексты Unicode в вашем html.
Я не знаю, как вы создали синтаксис, поскольку я никогда не использовал svg в объявлении шрифта, но Font Squirel имеет действительно хороший инструмент для создания пуленепробиваемого синтаксиса шрифта из одного шрифта.
также может использоваться URL-адрес в пути тега font-face. Если вы используете "http://domain.com" это не работает в Firefox, для меня изменение его на "http://www.domain.com-сработало.
моя проблема заключалась в том, что Windows назвала шрифт "шрифт".TTF и firefox ожидаемый шрифт.ttf ' я увидел, что после открытия моего проекта в linux, переименовал шрифт в имя propper и все работает