Question

我正在使用webpack并尝试加载生成的图标字体，但不断收到＆＃34; OTS解析错误：无效的版本标记＆＃34;错误。

这是我的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]'
                }
            }

这是我的my-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 系统 fonts，而不是webfonts，当你也使用WOFF时不要使用它们（WOFF字面地将它们包装为字节，但是使用表级压缩）。 “在我们的制造商仍然支持的浏览器上，我应该使用哪种格式的现代网站？” "You only need WOFF"（或超现代幻想的WOFF2）。

解决方案的第二部分是“为了爱你的用户不要把你的静态资产放在你的JS应用程序包中”，因为浏览器无法以这种方式缓存它们，每次你更新你的字体或您的代码，您的用户现在必须重新下载整个捆绑，浪费大量的带宽和时间。使用普通的静态服务器（AWS，github页面，随意选择）保持这些文件像普通静态资产一样托管。实际上不应该让webpack意识到你的html文件将加载一个将要加载webfont的.css文件这一事实。你的样式代码应该只能假设“有效”。

Webpack：＆＃34; OTS解析错误：无效的版本标记＆＃34;加载* .eot字体时

1 个答案: