OTS解析错误：无法将WOFF 2.0字体转换为Spring-boot的Glyphicon字体文件的SFNT。

Question

在使用Spring-boot和maven创建项目，在Algular中尝试使用Glyphicons时，图标无法显示，控制台会显示以下错误：

Failed to decode downloaded font: <URL> ..
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
OTS parsing error: incorrect file size in WOFF header
OTS parsing error: incorrect entrySelector for table directory

这里有一些解决方案，但没有一个考虑到Spring-Boot Maven的情况。

- Pranay

---

请查看此链接 - 不同的过滤排除配置 - https://github.com/google/material-design-icons/issues/908。 - hello_earth

Answer 1

似乎Maven构建资源会损坏这些文件，导致Bootstrap无法正确地解码它们，从而导致这些错误。我发现的一个解决方法是在maven-resources-plugin中添加nonFilteredFileExtensions。

<configuration>
    <nonFilteredFileExtensions>
    <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
    <nonFilteredFileExtension>woff</nonFilteredFileExtension>
    <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
    <nonFilteredFileExtension>eot</nonFilteredFileExtension>
    <nonFilteredFileExtension>svg</nonFilteredFileExtension>
    </nonFilteredFileExtensions>
 </configuration>

这里，我们可以添加所有字体/图标文件的扩展名，因为Maven可能会破坏它们，这样应该可以解决问题。

插件部分应该像这样：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

- Pranay

---

它解决了这个问题，但是非过滤文件扩展名实际上是如何解决这个问题的？ - c.sankhala

我正在尝试使用frontend-maven-plugin与reactjs。这解决了我的问题，谢谢。 - hasankzl

Answer 2

对于angular + aws，需要添加以下内容到binaryMimeTypes中： 'image/svg+xml', 'font/ttf', 'font/woff', 'font/woff2'。

- Cerchi

---

这对我在 AWS Lambda 上运行的基于 Express 的应用程序有所帮助。 - Ben Clayton

const binaryMimeTypes = ['application/octet-stream',' font/eot', 'font/opentype', 'font/otf', 'image/jpeg', 'image/png', 'image/svg+xml', 'font/ttf', 'font/woff', 'font/woff2'] 将会在 lambda.js 文件中可用。 - Shivam Agrawal

@BenClayton，您能具体说明您在哪里添加这个吗？ - qarthandso

@ShivamAgrawal，你在哪里添加了这个？ - qarthandso

@qarthandso 我们在 JavaScript Lambda 中使用了 serverless-http 库。在根 JavaScript 文件中，我们使用以下代码：module.exports.server = serverless(app, { binary: binaryMimeTypes}); - Ben Clayton