Webpack: "OTS-Parsingfehler: ungültiges Versionstag" beim Laden von * .eot-Schriftart

Question

Ich verwende Webpack und versuche, eine generierte Symbolschrift zu laden, bekomme aber weiterhin den Fehler "OTS-Parsingfehler: ungültige Version".

Das ist mein webpack Config Schriften und Bilder zu laden:

  { 
       test: /\.svg$/, 
       loader: 'svg-url-loader', 
       options: {} 
      }, 
      { 
       test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=/[name].[ext]' 
      }, 
      { 
       test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=/[name].[ext]' 
      }, 
      { 
       test: /\.[ot]tf(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'url-loader?limit=65000&mimetype=application/octet-stream&name=/[name].[ext]' 
      }, 
      { 
       test: /\.eot(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/, 
       loader: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=/[name].[ext]' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'file-loader', 
       options: { 
        name: '[name].[ext]?[hash]' 
       } 
      } 

Dies ist in meinem my-icons.css Schrift Erklärung:

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

ich verwenden, um verschiedene Konfigurationen zu ähnlichen Themen vorgeschlagen über dieses Thema, aber ich kann es nicht zur Arbeit bringen.

Answer 1

Die Lösung hier ist ziemlich einfach, eigentlich: es ist 2017 und Microsoft nicht mehr unterstützt eot, das svg Format nicht mehr existiert, und ttf/otf sind System Schriftarten, nicht Webfonts, sie nicht verwenden, wenn Sie auch WOFF (WOFF umschließt sie buchstäblich Byte für Byte, aber mit Komprimierung auf Tabellenebene). "Welches Format sollte ich für moderne Websites in Browsern verwenden, die noch von ihren Herstellern unterstützt werden?" "You only need WOFF" (oder WOFF2 für super moderne Fanciness). Der zweite Teil der Lösung lautet: "Aus Liebe zu Ihren Benutzern fügen Sie Ihre statischen Assets nicht in Ihr JS-App-Bundle ein", weil der Browser sie nicht zwischenspeichern kann und jedes Mal, wenn Sie Ihre Schriftart aktualisieren, oder Ihr Code, Ihre Benutzer müssen jetzt das gesamte Bündel redownload, verschwenden Tonnen Ihrer Bandbreite und ihre Zeit. Halten Sie diese Dateien wie normale statische Assets gehostet, verwenden Sie einen normalen statischen Server (AWS, github-Seiten, wählen Sie). Es sollte nicht wirklich notwendig sein, webpack auf die Tatsache aufmerksam zu machen, dass Ihre HTML-Datei eine .css-Datei lädt, die einen Webfont lädt. Ihr Style-Code sollte einfach "das funktioniert" annehmen können.