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

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

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;
}

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

Ответ 1

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

Ответ 2

Если в IIS в качестве сервера и .net 4/4.5 могут отсутствовать определения расширения mime/file в Web.config - например:

<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>

Ответ 3

У меня была та же проблема. , 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

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

Ответ 4

попробуйте

@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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

При использовании 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>

Ответ 8

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

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).

Ответ 9

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

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

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

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

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

Ответ 10

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

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

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

: -)

Ответ 11

Для пользователей 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;
}

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

Ответ 12

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

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

Ура!

Ответ 13

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

Ответ 14

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

Ответ 15

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

Ответ 16

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

Ответ 17

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

Добавление версии шрифта (например, ?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) в контекстном меню, должно быть достаточно для доступа к версии шрифта.

Ответ 18

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

проверьте файл .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
очистить кеш сервера
очистить кеш браузера и перезагружать

Ответ 19

Проверьте свой файл шрифта 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 из имени файла.

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

Ответ 20

Просто укажите формат @font-face следующим образом:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

Ответ 21

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";

Ответ 22

У меня была такая же проблема, это сработало для меня https://github.com/webpack/webpack/issues/1468