Не удалось декодировать загруженный шрифт. Ошибка OTS-файла в приложении Angular 6, развернутом с помощью nginx

Question

Я развернул угловую папку dist со следующей структурой в ngnix. Но получаю ошибку Failed to decode downloaded font: host/rfid/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0; OTS parsing error: invalid version tag.

Вот как я включил потрясающий шрифт.

package.json

"dependencies": {
-------
"font-awesome": "^4.7.0",
--------
}

angular.json

"styles": [
-----,
"node_modules/font-awesome/scss/font-awesome.scss",
-----
]

Вот путь, по которому я развертываю папку dist.

/user/www/data/rfid/dist

Ниже приведен мой файл конфигурации nginx default.conf .

proxy_cache_path /tmp/nginx levels=1:2 keys_zone=nginx_cache_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";

client_max_body_size 20M;
proxy_read_timeout 600;

server {
    listen 80 default_server;
    server_name something;
    location /rfid/ {
      alias /user/www/data/rfid/dist/;
      try_files $uri$args $uri$args/ /rfid/index.html;
   }
}

Позвольте мне также указать, как выглядит моя сборка.

Что мне здесь не хватает? Заранее спасибо.

Редактировать: Если это проблема добавления строки запроса к URL-адресу, который ищет файл, что я могу сделать, когда я только указываю зависимость и добавляю файл sass?

Answer 1

У меня была такая же проблема с OP, как и в Font Awesome 4.7.0, в качестве зависимости NPM без элемента управления для изменения font-url.

В итоге мы изменили конфигурацию Nginx try_files, чтобы также проверить $uri без $args.

Так от:

try_files $uri$args $uri$args/ /rfid/index.html;

Вы можете пойти с:

try_files $uri$args $uri$args/ $uri $uri/ /rfid/index.html;

Убедитесь, что вы понимаете значение для остальной части вашего сайта, если вы собираетесь использовать этот подход.

Другой вариант - обновить до Font Awesome 5.x , который больше не использует строки версий, в соответствии с комментарием коммиттера и этой проблемы GitHub.

Answer 2

Я считаю, что с такими проблемами лучше всего проверить систему отслеживания проблем в репозитории зависимостей. 84% времени вы найдете кого-то, кто столкнулся с той же проблемой.

Я удалил вашу ошибку в удивительном шрифте трекере проблем и похоже, что некоторые люди сталкивались с подобной проблемой:

Попробуйте удалить строку запроса ?v=4.6.3 из вашего CSS.

Пример:

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

Надеюсь, это поможет.