从ionic2中的资产文件夹加载字体时出错

Posted 2023-03-15

【中文标题】从ionic2中的资产文件夹加载字体时出错

【英文标题】：error while loading fonts from assests folder in ionic2

【发布时间】：2017-08-31 04:17:40

【问题描述】：

在开发离子应用程序时，我使用了一些图标和图像。问题是现在我的应用程序无法正确显示图标。在控制台中出现这些错误

Failed to load resource: the server responded with a status of 404 (Not Found)----ionicons.woff2

'roboto-medium.ttf','roboto-regular.ttf','ionicons.woff','ionicons.woff','roboto-regular.woff'存在这些错误

 localhost:portnumber/build/assets/fonts/roboto-light.ttf 404 (Not Found)

我什至没有在我的应用程序中使用任何字体，但是为什么这会影响显示图标

科尔多瓦 CLI：6.5.0 Ionic 框架版本：2.0.0 Ionic CLI 版本：2.2.1 Ionic 应用程序库版本：2.2.0 Ionic 应用脚本版本：1.0.0 ios-deploy 版本：未安装 ios-sim 版本：未安装 操作系统：Linux 3.13 节点版本：v7.7.2 Xcode 版本：未安装

我已经与我以前的同一个应用程序副本进行了交叉检查，发现 @font-face 的 main.css 文件中的路径从 ../assets/fonts 更改为 assets/fonts/ionicons.woff2 。我认为这是根本原因，但我尝试更改它，运行应用程序后未应用更改。如何解决此问题。

【问题讨论】：

您是使用自己的图标和图像.. 还是使用离子图标..？

我正在使用 ionicons

哦.. 打开项目中的 www 文件夹并导航到 assets -> fonts.. 检查错误消息中的所有 4 个文件是否都存在。然后尝试再次构建项目并运行它..（如果错误仍然存​​在，请发布您当前使用的cli版本和ionic版本）

是的，所有这些文件都在 www/assets/fonts 中。

【参考方案1】：

经过一番挣扎，我找到了解决方案。即在“主题”文件夹中更改 variable.scss 文件。更改变量 $font-path 的路径解决了所有问题。$font-path: "../assets/fonts";

【讨论】：

嗨。我已经有了像$font-path: "../assets/fonts" 这样的路径，但是没有安装字体。我的问题是Roboto 字体。它们没有被添加到assets/fonts 内有什么想法吗？

【参考方案2】：

对我来说也有同样的问题。

由于一些修改，这些文件丢失了，我得到了解决-

$ npm install 服务器重启ionic serve --lab

对我来说很棒。

希望它也对你有用。

【参考方案3】：

如果您不需要 Roboto 字体，只需在 variables.scss 中删除这一行 @import "reboto"

【参考方案4】：

在我的情况下，以下是对错误的修复： 将此 mime 添加到您的 web.config：

<configuration> <system.webServer> <staticContent> ...
<!--
    https://***.com/questions/28235550/proper-mime-type-for-woff2-fonts
  -->   
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />