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文件的事实。你的风格代码应该简单地能够假设“有效”。