问题标签 [woff2]

我正在编写一个 Web 应用程序并尝试使用font-awesome图标。字体被导入到正确的目录，但是当我加载页面时，图标显示为空白方块。（附图中的示例）。

当我按下F12这是我得到的错误：（也在附图中）

加载资源失败：服务器响应 fontawesome-webfont.woff2 状态为 404（未找到）

加载资源失败：服务器响应 fontawesome-webfont.woff 状态为 404（未找到）

加载资源失败：服务器响应 fontawesome-webfont.ttf 状态为 404（未找到）

这些文件确实存在，我可以看到它们。我设法通过更改web.config文件找到了一些解决方案，但这对laravel. laravel 5.5我在网上找不到任何合适的解决方案。非常感谢帮助！

PS - 我还不知道这是否相关，但我使用vue.js组件中的图标。

我注意到在运行 Pingdom 速度测试和查看文件请求部分时，测试服务器从我的站点下载每种字体的 .woff2 和 .woff 版本，使用标准 @font-face css 声明如下：

（我自己托管 Google 字体。）

所以基本上使用 8 种字体，测试服务器请求 8 个额外的 .woff 文件，它并不真正需要。

为什么会这样？我使用 Chrome/Firefox 开发人员工具测试了该站点，并且仅按预期检索了 .woff2。这是 Pingdom 的错误吗？

有趣的是，我注意到测试服务器只请求了 FontAwesome 的 .woff2 版本，尽管 fontawesome css 也引用了 .woff2 和 .woff 版本。

下载 Google webfont 的 css 资源时，结果似乎取决于浏览器。

当我使用浏览器（Firefox 或 Chrome）打开此 URL 时：

我得到这个结果，其中包含不同 unicode 字符范围的几个 woff2 字体源。

例如，当使用 CURL 下载相同的 CSS 资源 URL 时，我得到的结果只包含一个 .ttf 字体，它似乎只包含一个默认的 unicode 字符范围。

显然，谷歌从 HTTP 请求中查看代理字符串，然后相应地调整结果。

有没有办法获得具有完整 unicode 字符范围的 .ttf，即“multi woff2”版本中还包含的所有内容？最重要的是拉丁和拉丁扩展字符。

我可以将 woff2 字体转换为 ttf。但是我不知道如何将多个 woff2 字体合并或合并为一个 ttf，或合并为一个 woff2，然后进行转换。

还是我做错了什么，我应该完全使用不同的方法吗？

我在 .NET 商店；Octopus 和 TeamCity 用于部署到我们的测试和生产环境。我在 .WOFF2 中添加了一些字体/_css/fonts folder，我引用它们如下：

.WOFF2 字体出现在 localhost 上，但不知何故，它们在构建输出中被省略了。奇怪的是有一个成功输出的 FontAwesome 的 .WOFF2 引用。我检查了 Visual Studio 中字体的属性，并且所有新的（非输出）字体都设置为始终复制到输出目录。尽管我们付出了所有努力，但这些字体仍然出现 404 错误。

TIA 为您提供任何帮助！

./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 中的错误 1:4 模块解析失败：意外字符 '' (1:4) 您可能需要适当的加载程序来处理此文件类型。（此二进制文件省略了源代码）

WOFF 文件无法加载，我不知道为什么文件加载器无法加载 WOFF、WOFF2 和 SVG。

这是我的 Webpack 4 加载器配置：

请向我提出解决方案。

我的服务器上有一个 .woff2 字体，它不断返回 404 错误。经过研究，我发现我需要一个 mimeMap 标签来告诉服务器如何服务它。我添加了这个，它运行良好，然后我注释掉了重写规则，然后它就停止了工作。但是取消注释重写规则并不能使它再次起作用，没有其他任何改变。这是我的 web.config：

服务器是IIS7+，服务器上确实存在字体，路径正确。出了什么问题？请帮忙。

问题，nginx 缺少 woff2 的内容类型

我尝试过的：

1) 添加 application/woff2 woff2;到/etc/nginx/mime.types（还有 application/x-font-woff2 等）

2）将此部分添加到服务器部分并且它可以工作

3）将上面的部分更改为此，仍然没有成功

我还查看nginx -T了配置以确保 woff2 没有其他条件。

我有一个 S3 存储桶，前面有一个 Cloudfront CDN。在那个桶中，我有一些 woff2 字体，它们自动标记为 content type octet-stream。尝试从现场制作网站上的 CSS 文件加载该字体时，我收到以下错误：

问题是 curl 表明Access-Control-Allow-Origin存在：

在 Firefox 中一切正常，所以我猜 Chrome 正在做一个额外的验证来阻止我的字体。

我知道 woff2 检测以及基于 css 的@supports可变字体支持检测，但是有没有办法纯粹在 Javascript 中检测可变字体支持？

我有一个 Next.js 应用程序，我必须将它迁移到 Digital Ocean 上的新服务器，该服务器现在是专用 cpu，突然间我的字体被用作 Content-Type: text/html; charset=utf-8 并且我收到 500 错误。这以前在另一台服务器上工作，没有更改代码库。我已经尝试了很多东西，但我被难住了。

编辑：我添加了我的 next.config.js 的样子