Не вдалося розшифрувати завантажений шрифт, помилка розбору 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;
}

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

Я отримав абсолютно таку ж помилку, і в моєму випадку це виявилося через неправильний шлях @font-faceдекларації. Веб-інспектор ніколи не скаржився на 404, оскільки сервер розробників, який ми використовуємо (живий сервер), був налаштований для обслуговування за замовчуванням index.html на будь-яких 404: s. Не знаючи жодних деталей про вашу установку, це може бути винуватцем.

Якщо на сервері IIS працює сервер і .net 4 / 4.5, можливо, у Web.config відсутні дефініції розширення mime / file - ось так:

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

У мене виникло те саме питання., 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

Потім я видалив пошкоджені файли шрифтів і повторно застосував нові файли шрифтів і чудово працює.

спробуйте

@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

У мене був пошкоджений шрифт, хоча він, здається, завантажується без проблем, і під джерелами в Chrome з'явилися відображення devtools, кількість байтів не було правильним, тому я завантажив знову і це вирішив.

Просто виберіть формат штату на @ font-face таким чином:

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

У мене була та сама проблема, і це було через те, що git трактує ці файли як текст. Тож під час перевірки файлів у агентах побудови бінарний файл не підтримувався.

Додайте це у свій .gitattributesфайл і спробуйте.

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

Під час використання 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>

Я отримував такі помилки:

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

Перейдіть за адресою нижче на GitHub і завантажте кожен з файлів FontAwesome.

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

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

Я виявив, що збереження посилання як завантаженої HTML-сторінки, а не бінарного файлу FontAwesome.

Колись у мене були всі бінарні файли, це працювало на мене.

Моє питання полягало в тому, що я оголошував два шрифти, і scss, здається, очікує, що ви оголосите ім'я шрифту.

після того, як @font-face{} ви повинні заявити $my-font: "OpenSans3.0 or whatever";

і це для кожного шрифту.

:-)

Для користувачів 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;
}

Цей пост може бути старим, але це рішення, яке працювало для мене.

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

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

Якщо ви користуєтеся Chrome, спробуйте додати версію шрифту з відкритим типом (OTF), як показано нижче:

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

Ура!

Якщо ви використовуєте bootstrap, тоді оновіть bootstrap.min.cssфайл bossstrap css ( ) та файли шрифтів. Я вирішив свою проблему з цим рішенням.

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

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

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

Якщо інші відповіді не спрацювали, спробуйте:

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

Перевірте файл 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 з імені файлу.

Тоді проблема буде вирішена.

про всяк випадок, коли це актуально для когось. Я отримав таку саму помилку за допомогою ASP.NET та C # у Visual studio. Коли я запустив додаток із візуальної студії, він працював, але у мене виникла ця проблема. Тим часом виявилося, що шлях до мого проекту містив символ "#" (c: \ C # \ testapplication). Це, мабуть, бентежить IIS Express (можливо, також IIS) і спричиняє цю проблему. Я думаю, що "#" є зарезервованим символом десь у ASP.NET або нижче. Зміна шляху допомогла і тепер вона працює як очікувалося.

З повагою Крістоф

Що мені допомогло, що я змінив порядок. Перший завантажується .eot, але моя помилка була при завантаженні .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;
}

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

У мене був той самий випуск, це працювало для мене https://github.com/webpack/webpack/isissue/1468