Firefox @font-face терпит неудачу с Fontawesome

Question

Firefox @font-face терпит неудачу с Fontawesome

Я использую шрифт FontAwesome в OSS-приложении, которое я запускаю, и я не могу пройти через дезинфицирующее средство для шрифтов Firefox.

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

Поэтому я, должно быть, упускаю что-то простое.

Живой URL: https://bmark.us/

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css

Примеры ошибок Firefox, когда я пытаюсь исправить это через dev. Я попытался сделать полный путь к корню / static / font и относительно css../font/, и он всегда терпит неудачу с этими ошибками для меня.

Все работает в Chrome и такое. Кажется, только Firefox ненавидит меня. Я искал другие ответы, и у меня есть целая серия шрифтов.

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

Спасибо за любые подсказки.

9

firefox font-awesome font-face

Источник

user159689 17 июн '12 в 15:48

5 ответов

Другие вопросы по тегам firefox font-awesome font-face

user159689 18 июн '12 в 18:07 2012-06-18 18:07 · Answer 1 · 2012-06-18 18:07

Спасибо, это была проблема из двух частей.

Вторая часть приходит первой. В примере css из fontawesome.scss используются одинарные кавычки вокруг путей различных форматов шрифтов. Когда я запустил мой scss builder (pyscss) на них, он лишил их. Они должны были быть в двойных кавычках.

Поскольку кавычек не было, FF не удалось разобрать бит src: url(...). Так как это не удалось, у него был только src: ..eot, предназначенный для IE, и он не работал в FF.

Изменение кавычек на двойные сделало все счастливым.

Так что я виноват в использовании pyscss и его синтаксического анализатора, который в итоге нарушил синтаксис Firefox.

Спасибо, Мэтт, за то, что помог мне взглянуть поближе.

user4220087 24 ноя '14 в 01:45 2014-11-24 01:45 · Answer 2 · 2014-11-24 01:45

Я столкнулся с той же проблемой на одном из сайтов моих клиентов.

@font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg');
}

Выше работает в Firefox. Тот, что ниже, не работал.

@font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg);
}

Оказывается, спецификаторы формата должны быть заключены в кавычки как формат ('svg'). Некоторые из таблиц стилей CSS, обслуживаемых сайтами, не содержат кавычек спецификаторов формата. Я экспериментировал с путями с одинарными и двойными кавычками, и это не имело никакого значения. Таким образом, я могу сказать, что проблема заключается в спецификаторах формата без кавычек, а не в двойных / одинарных кавычках.

user1463985 18 июн '12 в 14:37 2012-06-18 14:37 · Answer 3 · 2012-06-18 14:37

А) Вы уверены, что на вашем сервере установлены типы mime для eot/woff/ttf/svg?? Б) Похоже, вы столкнулись с проблемой с EOT. это можно объяснить тем, что Firefox не поддерживает EOT; он использует WOFF и TTF. C) Вы пытались отлаживать с помощью инструментов разработчика Firebug или Firefox? D) Можете ли вы опубликовать свои (соответствующие) CSS и HTML?

user1652253 06 сен '12 в 14:09 2012-09-06 14:09 · Answer 4 · 2012-09-06 14:09

В моем случае было достаточно поместить файлы .eot /.woff /.svg /.ttf в тот же файл *.war, что и другой статический контент (css, png и т. Д.). Похоже, FF и IE считают скачивание файлов шрифтов с других серверов опасным.

3

Источник

user1652253 06 сен '12 в 14:09

user3774167 21 окт '17 в 04:49 2017-10-21 04:49 · Answer 5 · 2017-10-21 04:49

Я знаю, что это будет поздно, но лучший вариант - это использовать font-awesome из CDN. Вы вряд ли столкнетесь с такого рода ошибками, если сделаете это.

Если вы ссылаетесь на шрифт из внешнего файла, закомментируйте строки:

@font-face {
    font-family: FontAwesome;
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot");
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg");
    font-weight: 400;
    font-style: normal
}

и вместо этого используйте ссылку из CDN в голове

<head>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
</head

и тебе было бы хорошо пойти.