Не удалось декодировать загруженный шрифт, ошибка анализа OTS: неверный тег версии + rails 4


136

Я делаю активы перед компиляцией и запускаю приложение в производственном режиме. После компиляции, когда я загружаю свою страницу индекса, я получаю следующие предупреждения в консоли chrome:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

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

мы использовали пользовательские шрифты и код:

@font-face {
  font-family: 'icomoon';
  src: font-url('icomoon.eot');
  src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
       font-url('icomoon.ttf') format('truetype'),
       font-url('icomoon.woff') format('woff'),
       font-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

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


2
Это может быть несколько вещей: кодировка символов может быть неправильной или сам шрифт может быть поврежден. Вы можете открыть шрифт в Font Book или подобном? Быстрый Google обнаруживает ошибку в браузере Chromium версии 45: code.google.com/p/chromium/issues/detail?id=545924
Крейг,

Вам удалось решить проблему?
кодер

1
В моем случае я должен очистить кэш-память облака и подождать несколько минут, чтобы время решило проблему!
HoseinGhanbari

У меня была такая же проблема, и я обнаружил, что мне нужно иметь шрифт woff2 перед woff для chrome.
jcubic

Ответы:


138

Я получил точно такую ​​же ошибку, и в моем случае это произошло из-за неправильного пути для @font-faceобъявления. Веб-инспектор никогда не жаловался на 404, так как используемый нами dev-сервер (live-server) был настроен для обслуживания index.html по умолчанию на любых 404: s. Не зная каких-либо подробностей о вашей настройке, это может быть вероятным виновником.


1
Если это является причиной перенаправления, вы можете отфильтровать его по расширению RewriteRule! \. (Js | gif | css | jpg | otf | eot | png) $ / redirect [R = 301, L]
fearis

В моем случае пакетирование и минимизация ASP.NET MVC существенно изменили расположение CSS без изменения относительных путей в нем. Пришлось удалить уже минимизированный файл и использовать его CssRewriteUrlTransformв BundleConfig.
Синджай

22

При работе на IIS в качестве сервера и .net 4 / 4.5 в Web.config могут отсутствовать определения расширений MIME / расширений файлов, например:

<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" />
    </staticContent>
</system.webServer>


16

У меня была такая же проблема., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

Если вы получили это сообщение об ошибке при попытке зафиксировать ваш шрифт, это проблема с .gitattributes " warning: CRLF will be replaced by LF"

Решением для этого является добавление любого шрифта, с которым вы получаете проблему в .gitattributes

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Затем я удалил поврежденные файлы шрифтов и повторно применил новые файлы шрифтов, и теперь он работает отлично.


где этот файл живет? будет ли браузер даже знать, что он существует? Как?
Омар

@Omar Этот файл должен находиться в вашем корневом каталоге и не иметь ничего общего с браузером. Он описывает, как git собирается управлять окончаниями строк в разных форматах файлов. Git может испортить некоторые типы файлов, пытаясь изменить окончания строк.
elliottregan

5

пытаться

@font-face {
  font-family: 'icomoon';
  src: asset-url('icomoon.eot');
  src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
       asset-url('icomoon.ttf') format('truetype'),
       asset-url('icomoon.woff') format('woff'),
       asset-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

и переименуйте ваш файл в application.css.scss


4

У меня был поврежденный шрифт, хотя он, казалось, загружался без проблем, и в разделе «Источники в Chrome» показывалось, что devtools отображал, количество байтов было неправильным, поэтому я загрузил снова, и он решил это.


При использовании woff2 у меня возникла эта проблема после использования онлайн-конвертеров. Необходимо использовать конвертер командной строки woff2 (доступно через homebrew)
Роб-Гордон


3

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

Добавьте это в свой .gitattributesфайл и попробуйте.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

2

При использовании angular-cli, это то, что работает для меня:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <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="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Было бы здорово, если бы вы могли сказать, к какому файлу вы добавите эти файлы?
Сайяфф Фарук

1
Отредактируйте web.config
Скорунка Франтишек

Я не смог отправить файл web.config в проект angular-cli. Использование версии 1.3.0. Любая подсказка?
Сайяфф Фарук

Web.config используется только при размещении клиентского приложения в IIS (включая веб-службы Azure).
Скорунка Франтишек,

2

Я получаю следующие ошибки:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

которая была исправлена ​​после загрузки исходного файла непосредственно с:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Проблема заключалась в том, что при загрузке файла произошла ошибка прокси-сервера (он содержал сообщение об ошибке HTML).


Я не думал проверять сам файл. Убедитесь, что вы не скачиваете эту ссылку напрямую («сохранить ссылку как»), а введите ее и используйте кнопку «скачать».
omadawn

2

Перейдите по адресу ниже на GitHub и загрузите каждый из файлов FontAwesome.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

... но вместо того, чтобы щелкнуть правой кнопкой мыши и сохранить ссылку как, нажмите на каждый из файлов и используйте кнопку «Загрузить», чтобы сохранить их.

Я обнаружил, что сохранение ссылки в виде загруженной HTML-страницы, а не самого двоичного файла FontAwesome.

Как только у меня были все двоичные файлы, это работало на меня.


1

Моя проблема заключалась в том, что я объявлял два шрифта, и scss, кажется, ожидает, что вы объявите имя шрифта.

после вашего @font-face{} вы должны объявить $my-font: "OpenSans3.0 or whatever";

и это для каждого шрифта-лица.

:-)


Вы говорите о семье шрифтов?
Надав B,

не помню сейчас, извините :-)
Антуан

1

Для пользователей angular- cli и webpack я подозревал, что при импорте шрифтов в файл css существует некоторая проблема, поэтому, пожалуйста, укажите URL-адрес, закодированный в одинарных кавычках, следующим образом:

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Этот пост может быть старым, но это решение, которое сработало для меня.


1

У меня была такая же проблема.

Добавление версии шрифта (например ?v=1.101) к URL-адресам шрифта должно помочь;)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Для доступа к версии шрифта достаточно щелкнуть (щелкнуть правой кнопкой мыши) версию TTF шрифта и выбрать «Свойства» (Mac OSX) «Свойства» (Windows) в контекстном меню.


0

Если вы используете Chrome, попробуйте добавить версию шрифта opentype (OTF), как показано ниже:

    ...
     url('icomoon.otf') format('opentype'),
    ...

Ура!


0

Если вы используете bootstrap, обновите bootstrap.min.cssфайл начальной загрузки css ( ) и файлы шрифтов. Я исправил мою проблему с этим решением.


0

Я использую ASP.NET с IIS, и оказалось, что мне просто нужно было добавить MIME-тип в IIS: '.woff2' / 'application / font-woff'


0

Попробовав множество других подходов, а также множество переустановок и проверок, я только что исправил проблему, очистив данные браузера Chrome (кэшированные изображения и файлы), а затем обновив страницу.


0

У меня была такая же проблема, когда я открыл и сохранил .woffи. woff2файлы через Sublime Text с EditorConfigопцией end_of_line = lf. Я просто скопировал файлы в папку шрифтов, не открывая их в Sublime, и проблема была решена.


0

Если другие ответы не сработали, попробуйте:

  1. проверьте файл .htaccess

    # Fonts
    # Add correct content-type for fonts

    AddType application/vnd.ms-fontobject .eot
    AddType application/x-font-ttf .ttf
    AddType application/x-font-opentype .otf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType image/svg+xml .svg

  2. очистить кеш сервера

  3. очистить кэш браузера и перезагрузить

0

Проверьте CSS-файл вашего шрифта. (fontawesome.css / fontawesome.min.css) , вы увидите следующее:

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

Вы увидите тег версии после имени расширения вашего шрифта . Подобно:

-v = 4.6.3

Вам просто нужно удалить этот тег из вашего файла CSS. После удаления этого вам нужно перейти в папку со шрифтами, и вы увидите: введите описание изображения здесь

И, сформируйте файлы этих шрифтов, вам просто нужно удалить тег версии -v = 4.6.3 из имени файла.

Тогда проблема будет решена.


0

на всякий случай это актуально для кого-то. Я получил точно такую ​​же ошибку, используя ASP.NET и C # в Visual Studio. Когда я запустил приложение из визуальной студии, оно работало, но я получил эту проблему. Тем временем оказалось, что путь к моему проекту содержал символ «#» (c: \ C # \ testapplication). Это, кажется, сбивает с толку IIS Express (возможно, также IIS) и вызывает эту проблему. Я думаю, "#" - это зарезервированный символ где-то в ASP.NET или ниже. Смена пути помогла и теперь работает как положено.

С уважением Кристоф


есть какая проблема точно?
Неллес

codeНе удалось декодировать загруженный шрифт: localhost: 52963 / css /…
x-of из Резбаха

0

Что помогло мне, так это то, что я сменил порядок. Сначала загружается .eot get, но моя ошибка была при загрузке .eot. Поэтому я отказался от .eot в качестве первого src для woff2, и ошибка исчезла.

Итак, код сейчас:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

И это было:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

-1
For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

7
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
Андреас

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.