it-swarm.com.ru

FontAwesome не может загрузить шрифты локально и в электронном приложении

Я скачал FontAwesome, используя npm, а затем скопировал css-файл и шрифты в нужные папки в корневой директории моего электронного приложения, используя задачу копирования grunts. 

Все идет нормально. Все там, где это должно быть.

Теперь, когда я ссылаюсь на FontAwesome в моем приложении, значки не загружаются. Это ошибки, которые я получаю в консоли:

Не удалось декодировать загруженный шрифт: 
Файл: ///path/to/fonts/fontawesome-webfont.woff2 v = 4,4,0 
Ошибка анализа OTS: не удалось преобразовать шрифт WOFF 2.0 в SFNT 

Не удалось декодировать загруженный шрифт: 
Файл: ////path/to/fonts/fontawesome-webfont.woff v = 4,4,0
Ошибка анализа OTS: неверный размер файла в заголовке WOFF 

Не удалось декодировать загруженный шрифт:
Файл: ////path/to/fonts/fontawesome-webfont.ttf v = 4,4,0
Ошибка синтаксического анализа OTS: неверный entrySelector для каталога таблиц

Я уже пытался изменить css-файл FontAwesome, удалив все параметры версии, но, похоже, это не проблема. Проблемы возникают как при запуске приложения через electron ., так и при просмотре html-файла в браузере. 

ОБНОВЛЕНИЕ

Чтобы ответить на некоторые комментарии:

  • Эта проблема возникает в электронном, а также в браузере (протестировано в Chrome и Firefox)
  • Я использую новейшие версии FontAwesome (4.4.0) и Electron (0.32.1) (новая установка через npm)
  • cSS загружается как: <link rel="stylesheet" type="text/css" href="css/font-awesome.css" >
36
nozzleman

Проблема была в моем файле grunt. Я попытался воспроизвести проблему, просто загрузив все зависимости вручную на веб-сайтах их поставщиков и поместив их в соответствующую папку сценария моего проекта - вдруг это сработало. 

Я перешел на глоток сейчас, и он все еще работает. Понятия не имею, что я делал не так с ворчанием, хотя ...

2
nozzleman

У меня была похожая проблема (возможно, этот ответ кому-нибудь поможет). Я использую Maven для создания проектов (Java + JS). Maven Filter Plugin - поврежденные двоичные файлы шрифтов. Я должен был добавить, включает и исключает:

    <resources>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>true</filtering>
            <excludes>
                <exclude>**/*.woff</exclude>
                <exclude>**/*.ttf</exclude>
            </excludes>
        </resource>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>false</filtering>
            <includes>
                <include>**/*.woff</include>
                <include>**/*.ttf</include>
            </includes>
        </resource>
    </resources>
59
Azee

В моей ситуации Git рассматривал файл как текстовый файл и связывался с его «окончаниями строк». Это повредило файл.

Настройка .gitconfig для распознавания файлов * .woff как двоичных файлов, затем удаление файла и добавление новой копии из https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome- webfont.woff решил проблему для меня.

27
user892592

Для некоторых людей, которые развертывают в IIS, может помочь добавление этого в файл web.config (основной, а не в каталоге Controller).

<system.webServer>
   <staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
</system.webServer>

5
Stephen C

Я столкнулся с той же проблемой, используя API Gateway для обслуживания статических файлов шрифтов на Amazon S3.

Я исправил это, добавив */* в качестве двоичных типов носителей на консоли AWS.

Дополнительную информацию об управлении двоичными типами носителей можно найти на https://docs.aws.Amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html

4
piercus

попробуйте следующее, в начале вашего CSS-файла вызовите font-face следующим образом. 

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.eot?v=4.0.3);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3) format('embedded-opentype'), url(../fonts/fontawesome-webfont.woff?v=4.0.3) format('woff'), url(../fonts/fontawesome-webfont.ttf?v=4.0.3) format('truetype'), url(../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular) format('svg');
    font-weight: 400;
    font-style: normal
}
1
Richard Zilahi

Если вы используете bower, вы можете переписать свой font-face так:

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

Я уверен, что это решено, но это сработало для меня, так что ... я оставлю это здесь:

У меня была та же проблема со шрифтом, который я использовал раньше. Оказалось, это было связано с проблемой FTP. Файл был загружен как текст (ASCII) вместо двоичного файла, что повредило файл. Я просто заново загрузил файлы шрифтов, и тогда все заработало.

0
Andre Aquiles