Kan gedownload lettertype niet decoderen, OTS-parseerfout: ongeldige versietag + rails 4

Ik ben bezig met het pre-compileren van activa en het uitvoeren van de applicatie in productiemodus. Na compilatie, toen ik de mijn index-pagina laadde, kreeg ik de volgende waarschuwingen in de Chrome-console:

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

Het probleem is dat er geen pictogrammen worden geladen in plaats van dat er vierkanten worden weergegeven.

we hebben de aangepaste lettertypen gebruikt en de code is:

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

Ik weet niet wat er aan mijn kant ontbreekt. Ik heb veel gezocht en ook een oplossing geprobeerd, maar geen succes gehad. In de ontwikkelingsmodus werkt het prima, maar ik weet niet waarom het vierkant wordt weergegeven in de productiemodus.


Antwoord 1, autoriteit 100%

Ik kreeg exact dezelfde fout, en in mijn geval bleek dit te komen door een verkeerd pad voor de @font-face-declaratie. De webinspecteur klaagde nooit met een 404 omdat de dev-server die we gebruiken (live-server) was geconfigureerd om de standaard index.html op elke 404:s weer te geven. Zonder details over je setup te weten, zou dit een waarschijnlijke boosdoener kunnen zijn.


Antwoord 2, autoriteit 17%

Als u op IIS wordt uitgevoerd als de server en .NET 4 / 4.5 Misschien mist het MIME / FILE-uitbreidingsdefinities in Web.Config – zoals deze:

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

Antwoord 3, Autoriteit 14%

Ik had hetzelfde probleem. ,
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

Als u deze foutmelding hebt, probeert u uw lettertype te plegen, dan is het een probleem met .gitattributes
warning: CRLF will be replaced by LF

De oplossing hiervoor is het toevoegen van het lettertype u krijgt het probleem met in .gitattributes

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

Dan heb ik corrupte lettertypenbestanden verwijderd en de nieuwe lettertypebestanden opnieuw geopend en goed werkt.


Antwoord 4, Autoriteit 4%

Ik had een beschadigd font, maar het leek te laden zonder probleem en onder Bronnen in Chrome DevTools bleek weer te geven, het aantal bytes niet juist was, dus ik opnieuw gedownload en het probleem is opgelost.


Antwoord 5, Autoriteit 3%

Probeer

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

en de naam van het bestand naar application.css.scss


Antwoord 6, Autoriteit 3%

Just state-formaat op @ font-face als volgt:

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

Antwoord 7, Autoriteit 2%

Ik had het zelfde probleem en dat was vanwege de git de behandeling van deze bestanden als tekst. Dus terwijl het controleren van de bestanden in te bouwen agenten, werd binary niet wordt gehandhaafd.

Voeg dit aan je .gitattributesbestand en probeer het.

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

Antwoord 8

Wanneer u angular-cli, dit is wat werkt voor mij:

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

Antwoord 9

Ik kreeg de volgende fouten:

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

die werd opgelost nadat het onbewerkte bestand rechtstreeks was gedownload van:
https://github.com/twbs/bootstrap/ blob/master/fonts/glyphicons-halflings-regular.woff2

Het probleem was dat er een proxyfout was bij het downloaden van het bestand (het bevatte de HTML-foutmelding).


Antwoord 10

Ga naar het onderstaande adres op GitHub en download elk van de FontAwesome-bestanden.

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

…maar in plaats van met de rechtermuisknop te klikken en de link op te slaan als, klikt u op elk van de bestanden en gebruikt u de knop ‘Downloaden’ om ze op te slaan.

Ik ontdekte dat het opslaan van de link als gedownloade HTML-pagina en niet het binaire bestand van FontAwesome zelf.

Toen ik alle binaire bestanden had, werkte het voor mij.


Antwoord 11

Mijn probleem was dat ik twee lettertypen aan het declareren was, en scss lijkt te verwachten dat je de naam van het lettertype aangeeft.

na je
@font-face{}
je moet aangeven
$my-font: "OpenSans3.0 or whatever";

en dit voor elkfont-face.

🙂


Antwoord 12

Als je bootstrap gebruikt, update dan het bootstrap css(bootstrap.min.css) bestand en lettertypebestanden. Ik heb mijn probleem opgelost met deze oplossing.


Antwoord 13

Voor gebruikers van angular-clien webpackvermoedde ik dat er een probleem is bij het importeren van de lettertypen in het css-bestand, dus geef ook de url-locatie gecodeerd met enkele aanhalingstekens op als volgend –

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

Dit bericht is misschien oud, maar dit is de oplossing die voor mij werkte.


Antwoord 14

Ik heb hetzelfde probleem gehad.

Het toevoegen van de lettertypeversie (bijv. ?v=1.101) aan de lettertype-URL’s zou voldoende moeten zijn 😉

@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 */
}

Klikken (rechtermuisklik) op de TTF-versie van het lettertype en “Info ophalen” (Mac OSX) “Eigenschappen” (Windows) selecteren in het contextmenu zou voldoende moeten zijn om toegang te krijgen tot de lettertypeversie.


Antwoord 15

Wat me hielp, was dat ik de bestelling had gewijzigd. De .eot-get wordt eerst geladen, maar mijn fout was bij het laden van de .eot. Dus ik dumpte de .eot als eerste src voor woff2 en de fout verdween.

Dus de code is nu:

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

En het was:

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

Antwoord 16

Als je Chrome gebruikt, probeer dan een opentype (OTF)-versie van je lettertype toe te voegen, zoals hieronder weergegeven:

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

Proost!


Antwoord 17

Ik gebruik ASP.NET met IIS en het bleek dat ik alleen iets moest toevoegen
het MIME-type naar IIS: ‘.woff2’ / ‘application/font-woff’


Antwoord 18

Na veel andere benaderingen te hebben geprobeerd en veel herinstallaties en controles, heb ik het probleem zojuist opgelost door browsegegevens uit Chrome te wissen (gecachte afbeeldingen en bestanden) en vervolgens de pagina te vernieuwen.


Antwoord 19

Ik had hetzelfde probleem toen ik .woffen .woff2bestanden opende en opsloeg via Sublime Text met EditorConfigoptie end_of_line = lf.
Ik heb alleen bestanden gekopieerd naar de map met lettertype zonder ze te openen in subliem en het probleem is opgelost.


Antwoord 20

Als andere antwoorden niet werk probeer:

  1. Controleer .Htaccess-bestand

    # 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. Duidelijke servercache

  3. CLEAR BROWSER CACHE & AMP; Laad

Antwoord 21

Controleer het CSS-bestand font. (fontawesome.css / fontawesome.min.css) , je zult zo zien:

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

U ziet Version-tag na de bestandsverlengsnaam van uw lettertype . Zoals:

-v = 4.6.3

U hoeft deze tag alleen uit uw CSS-bestand te verwijderen.
Nadat u dit hebt verwijderd, moet u naar uw map Fonts gaan en u zult zien:

En om de bestanden van dit lettertype te vormen, hoeft u alleen de versietag -v=4.6.3uit de bestandsnaam te verwijderen.

Dan is het probleem verholpen.


Antwoord 22

voor het geval dit voor iemand relevant is. Ik kreeg exact dezelfde fout met ASP.NET en C# in Visual Studio. Toen ik de app vanuit de visuele studio startte, werkte het, maar ik kreeg dit probleem. In de tussentijd bleek dat het pad naar mijn project het teken “#” bevatte (c:\C#\testapplication). Dit lijkt IIS Express (misschien ook IIS) te verwarren en veroorzaakt dit probleem. Ik vermoed dat “#” ergens in ASP.NET of lager een gereserveerd teken is. Het veranderen van het pad hielp en nu werkt het zoals verwacht.

Met vriendelijke groet
Christof


Antwoord 23

Ik heb dit probleem al twee keer gehad met pictogramlettertypen die door icomoon zijn gegenereerd. In beide gevallen gebruikte een van de pictogrammen het “spatieteken” (20)

Het lijkt erop dat het gebruik van het spatieteken (code 20) dit probleem veroorzaakt. Nadat ik de code had gewijzigd in iets anders dan 20 (spatie), werkte het lettertype correct in Chrome.


Antwoord 24

ik had hetzelfde probleem, draaiend op een node.jsserver. het probleem kwam niet van mijn navigator, maar van de server!
ik gebruikte gewoon de functie fs.readFile(...). dit was genoeg voor kleine bestanden (ik gebruikte 10ko max), maar mijn lettertypebestanden waren ongeveer 150ko, wat veel te veel was voor al deze asynchronysatie-dingen :/
ik heb dit probleem opgelost met een stream :
(gegevens worden verzonden zoals ze door de stream worden gelezen)

const stream = fs.createFileStream(filename);
stream.on("error", () => {
    // error : file does not exist, etc.
    res.setHeader("content-type", "text/plain");
    res.statusCode = 404;
    res.end("ouuups, problem :/");
}
stream.on("open", () => {
    // good
    res.setHeader("content-type", mime);
        // mime is your font / file mime-type
    res.statusCode = 200;
    stream.pipe(res);
}

Antwoord 25

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

Antwoord 26

Ik had hetzelfde probleem, dit werkte voor mij https://github.com/webpack /webpack/issues/1468

Other episodes