Webpack：加載* .eot時出現「OTS解析錯誤：無效版本標記」字體

Question

我正在使用webpack並嘗試加載生成的圖標字體，但一直收到「OTS解析錯誤：無效版本標記」錯誤。

這是我的WebPack配置加載字體和圖像：

  { 
       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]' 
       } 
      } 

這是我的我的，icons.css字體聲明中：

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

我用不同的配置上有關此類問題的建議該主題，但我無法讓它工作。

Answer 1

這裏的解決方案是非常簡單的，實際上是：這是2017年，而微軟不再支持eot，該svg格式不再存在，ttf/otf是系統字體，而不是網絡字體，當你還可以使用不使用它們WOFF（WOFF從字面上將字節封裝爲字節，但是使用表級壓縮）。 「我應該使用哪種格式的瀏覽器上的現代網站仍然受制造商支持？」 "You only need WOFF"（或WOFF2爲超級現代fanciness）。

解決方案的第二部分是「爲了您的用戶的愛不要將您的靜態資產放在您的JS應用程序包中」，因爲瀏覽器無法以這種方式緩存它們，並且每次更新字體時或您的代碼，您的用戶現在必須重新下載整個包，浪費大量的帶寬和他們的時間。使用普通的靜態服務器（AWS，github頁面，請選擇），將這些文件保存爲普通靜態資產。應該沒有必要讓webpack知道你的html文件將加載一個將加載webfont的.css文件的事實。你的風格代碼應該簡單地能夠假設「有效」。