Следующий код работает как в бета-версии 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 . Как это возможно? Чего мне не хватает?
<style>
тегами и посмотреть, есть ли у вас такая же проблема?Ответы:
МЕСТНО РАБОТАЮЩИЙ САЙТ (
file:///
)Firefox поставляется с очень строгой
file:///
политикой «file uri origin» ( ) по умолчанию: чтобы он вел себя так же, как и другие браузеры, перейдитеabout:config
, отфильтруйтеfileuri
и переключите следующее предпочтение:security.fileuri.strict_origin_policy
Установите значение false, и вы сможете загружать ресурсы локальных шрифтов на разных уровнях пути.
ИЗДАННЫЙ САЙТ
Согласно моему комментарию ниже, и вы испытываете эту проблему после развертывания своего сайта, вы можете попытаться добавить дополнительный заголовок, чтобы увидеть, если ваша проблема настраивается как междоменная проблема: это не должно, так как вы указываете относительные пути, но я бы все равно попробовал: в вашем файле .htaccess укажите, что вы хотите отправить дополнительный заголовок для каждого запрашиваемого файла .ttf / .otf / .eot:
Честно говоря, я не ожидал бы, что это будет иметь какое-либо значение, но это настолько просто, что стоит попробовать: иначе попробуйте использовать кодирование base64 для шрифта, некрасиво, но это может также работать.
Хорошее резюме доступно здесь
источник
В дополнение к добавлению следующего к вашему .htaccess: (спасибо @Manuel)
Возможно, вы захотите явно добавить типы MIME webfont в файл .htaccess ... вот так:
В конце концов мой файл .htaccess выглядит следующим образом (для раздела, который позволяет веб-шрифтам работать во всех браузерах)
источник
У меня тоже была эта проблема. Я нашел ответ здесь: http://www.dynamicdrive.com/forums/showthread.php?t=63628
Это пример решения, которое работает на firefox, вам нужно добавить эту строку в ваш шрифт face css:
источник
local('name')
вfont-face
объявление просто означает «попытаться загрузить шрифт« name »на компьютер пользователя. Если он не найден, загрузите веб-шрифт». (см. MDN документы ). Тем не менее, рад, что это сработало для вас! :)Я просто оставлю это здесь, потому что мой коллега нашел решение для связанной проблемы «font-face не работает на Firefox, но везде».
Проблема была в том, что Firefox испортил декларацию семейства шрифтов, в итоге это исправили:
PS: я также использовал html5boilerplate.
источник
У меня была такая же проблема. Дважды проверьте код на наличие H1, H2 или любого стиля, на который вы нацеливаетесь с помощью правила @ font-face. Я обнаружил, что мне не хватает комы после того, как
font-family: 'custom-font-family' Arial, Helvetica etc
она хорошо видна в каждом браузере, кроме Firefox. Я добавил кому и это сработало.источник
У меня была точно такая же проблема. Мне пришлось создать новую папку с именем «шрифты» и поместить ее в wp_content. Я могу получить к нему доступ из своего браузера, например, http://www.example.com/wp-content/fonts/CANDY.otf.
Ранее папка fonts находилась в том же каталоге, что и мой CSS-файл, и @ font-face выглядел следующим образом:
Как я упоминал выше, это не работает в Firefox, а только с Chrome. Теперь это работает, потому что я использовал абсолютный путь:
источник
У меня была именно эта проблема при запуске ff4 на Mac. У меня был запущен локальный сервер разработки, и мое объявление @ font-face работало нормально. Я перешел в режим реального времени, и FF будет «мигать» правильным типом при первой загрузке страницы, но при более глубокой навигации гарнитура по умолчанию настроена на таблицу стилей браузера.
Я нашел решение, заключающееся в добавлении следующего объявления в .htaccess
найдено через
источник
Одно простое решение, о котором еще никто не упомянул, - это встраивание шрифта непосредственно в файл css с использованием кодировки base64.
Если вы используете fontsquirrel.com, в Kit Generator шрифта выберите экспертный режим , прокрутите вниз и выберите Base64 Encode в CSS Options - загруженный Font-Kit будет готов к подключению и воспроизведению.
Это также дает дополнительное преимущество, заключающееся в сокращении времени загрузки страницы, поскольку для этого требуется на один HTTP-запрос меньше.
источник
Я бы упомянул, что у некоторых шрифтов есть проблемы в Firefox, если их имя файла содержит определенные символы. Я недавно столкнулся с проблемой со шрифтом 'Modulus', который имел имя файла '237D7B_0_0'. Удаление подчеркиваний в имени файла и обновление css для соответствия новому имени файла решили эту проблему. Другие шрифты с похожими символами не имеют этой проблемы, что очень любопытно ... возможно, ошибка в Firefox. Я бы рекомендовал хранить имена файлов только буквенно-цифровыми символами.
источник
В частности, для этого шрифта вы должны использовать 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
Чтобы эффективно нивелировать локальную декларацию, просто сделайте вашу локальную исходную строку какой-то ерундой. Общепринятым соглашением для этого является использование символа смайлик-юникод (
"☺"
). Зачем? У Пола Айриша есть отличное объяснение в его блоге:http://paulirish.com/2010/font-face-gotchas/#smiley
источник
Вы тестируете это в локальных файлах или с веб-сервера? Файлы в разных каталогах считаются разными доменами для междоменных правил, поэтому, если вы проводите локальное тестирование, вы можете столкнуться с междоменными ограничениями.
В противном случае, вероятно, будет полезно указать URL-адрес, где возникает проблема.
Кроме того, я бы посоветовал взглянуть на консоль ошибок Firefox, чтобы увидеть, есть ли какие-либо синтаксические ошибки CSS или другие ошибки.
Кроме того, я бы отметил, что вы, вероятно, хотите использовать font-weight: bold во втором правиле @ font-face.
источник
Когда я столкнулся с этой проблемой, использование разрешения Allow Origin для управления доступом .htaccess не сработало.
Вместо этого в IIS в файле web.config вставьте блок system.webServer, показанный ниже.
Это сработало как обаяние для меня. Если вам нужно ограничить доступ к определенному домену, замените * на домен.
источник
У меня была та же проблема с получением шрифта для правильного отображения в Firefox. Вот что я нашел для меня. Добавьте косую черту перед каталогом, содержащим шрифт в атрибуте url. Вот мои версии до и после:
заметить косую черту перед «шрифтами» в URL? Это говорит браузеру начать с корневого каталога, а затем получить доступ к ресурсу. По крайней мере, для меня - проблема решена.
источник
Если вы пытаетесь импортировать внешние шрифты, вы сталкиваетесь с одной из наиболее распространенных проблем с вашим Firefox и другим браузером. Некоторое время ваш шрифт хорошо работает в Google Chrome или другом браузере, но не во всех браузерах.
Есть много причин для этого типа ошибки, одна из главных причин этой проблемы - предыдущий определенный шрифт. Вам нужно добавить ключевое слово! Important после окончания каждой строки кода CSS, как показано ниже:
Пример:
Описание: введите указанный выше код в свой файл CSS или код здесь. В приведенном выше примере замените "Hacen Saudi Arabia" на ваше семейство шрифтов и замените URL в соответствии с вашим каталогом шрифтов.
Если вы вводите! Важное в вашем браузере кода CSS, автоматически сосредоточьтесь на этом разделе и переопределите ранее использованное свойство. Для получения дополнительной информации посетите: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
источник
Можете ли вы проверить с Firebug, если у вас есть 404? У меня были проблемы с пропуском, и я обнаружил, что расширение было таким же, но linux file.ttf отличается от file.TTF ... и работал со всеми браузерами, кроме Firefox.
Жаль, что это помогает!
источник
Это проблема с тем, как вы настраиваете пути вашего font-face. Поскольку вы не начинали путь с «/», Firefox будет пытаться найти шрифт на основе пути, в котором находится таблица стилей. Поэтому в основном Firefox ищет ваш шрифт в каталоге «root / css / font» вместо каталог "root / font". Вы можете легко исправить это, переместив папку шрифтов в папку css, или добавив / в начало ваших путей шрифтов.
Попробуйте это:
источник
Попробуй это....
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
источник
У меня была похожая проблема. Демонстрационная страница fontsquirel работала в FF, но не на моей собственной странице, хотя все файлы были из одного домена!
Оказалось, что я связывал свою таблицу стилей с абсолютным URL-адресом (http://example.com/style.css), поэтому FF подумала, что это из другого домена. Меняя мою ссылку на таблицу стилей href на /style.css, я все исправил.
источник
Возможно, ваша проблема связана с именами, особенно в отношении использования (или нет) пробелов и дефисов.
У меня была проблема similair, которую я решил исправить, поместив необязательные кавычки (') вокруг имени шрифта / фамилии, но это фактически неявно исправило проблему именования.
Я не совсем в курсе CSS-спецификации, и есть (на мой взгляд) некоторая двусмысленность в том, как разные клиенты интерпретируют спецификации. Кроме того, это также относится к соглашениям об именах PostScript, но, пожалуйста, исправьте меня, если я ошибаюсь!
Во всяком случае, насколько я понимаю, ваша декларация использует смесь двух возможных разных вкусов.
Если вы рассматриваете Droid как фактическое фамилию, членами которой являются Sans и Serif , как, например, их дочерние элементы Sans Regular или Serif Bold , то вы либо используете пробелы везде для объединения идентификаторов, либо ИЛИ удаляете пробелы и используете CamelCasing для familyName и дефисы для подидентификаторов.
Применительно к вашей декларации это будет выглядеть примерно так:
ИЛИ
Я думаю, что оба должны быть совершенно законными, с кавычками или без них, но я имел смешанный успех с разными клиентами. Возможно, однажды у меня будет время, чтобы выяснить детали этого / этих вопросов.
Я нашел эту статью полезной для понимания некоторых аспектов: http://mathiasbynens.be/notes/unquoted-font-family
Эта статья содержит некоторые дополнительные сведения о PostScript, а также некоторые ссылки на спецификацию Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
источник
Не нужно возиться с настройками, просто удалите кавычки и пробелы из семейства шрифтов:
этот
становится этим
источник
В моем случае я решил проблему со вставкой кода стиля font-face
direclty в заголовке вашей страницы index.html или php, в теге style. Работает для меня!
источник
Из-за этого это один из лучших результатов Google для этой проблемы, я хотел бы добавить, что решило эту проблему для меня:
Мне пришлось удалить формат (opentype) из src шрифта-face, тогда это работало и в Firefox. До этого все работало в Chrome и Safari.
источник
Может быть, это не из-за вашего кода, а из-за вашей конфигурации Firefox.
Попробуйте это от
Tool bar
Western до Unicodeисточник
У меня была та же проблема, и я решил ее, добавив мета для контента:
Это происходит в Firefox и Edge, если у вас есть текст Unicode в вашем html.
источник
Я не знаю, как вы создали синтаксис, поскольку я использовал svg в объявлении шрифта, но у Font Squirel есть действительно хороший инструмент для создания пуленепробиваемого синтаксиса font-face только из одного шрифта.
http://www.fontsquirrel.com/fontface/generator
источник
Также может быть использование URL-адреса в пути тега font-face. Если вы используете «http://domain.com», он не работает в Firefox, для меня его изменение на «http://www.domain.com» работает.
источник
Моя проблема заключалась в том, что Windows назвала шрифт «font.TTF», а firefox ожидал «font.ttf». Я увидел, что после открытия моего проекта в Linux переименовал шрифт в propper name, и все работает
источник