Ionic 3，需要帮助导入自定义字体（全新项目）答案

【问题标题】：Ionic 3, need help importing custom font (brand new project)Ionic 3，需要帮助导入自定义字体（全新项目）
【发布时间】：2018-10-03 15:51:50
【问题描述】：

我正在尝试将一种名为“Picons Thin”的自定义图标字体导入我的 Ionic 项目。我将标题为 piconsthin-webfont.ttf、piconsthin-webfont.woff 和 piconsthin-webfont.woff2 的字体格式放入 www/assets/fonts 文件夹，并在同一文件夹中创建了一个 piconsthin-webfont.scss 文件，其中包含以下内容：

$piconsthin-webfont-font-path: $font-path !default;

@font-face {
  font-family: "piconsthin";
  src: local("piconsthin"),
       url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff2') format('woff2'),
       url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff') format('woff'),
       url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然后我去了 variables.scss 并看到底部的字体部分正在导入roboto和noto-sans，并假设这是调用字体文件夹中的scss文件。所以我添加了自己的一行：

@import "piconsthin-webfont";

但这只会在 Ionic 中给出一个错误，显示“找不到要导入的文件或无法读取：piconsthin-webfont”。

我尝试将 picons @font-face css 放入我知道可以找到的其他字体 scss 文件之一，我尝试将 @font-face css 放入主 src/app/ app.scss 文件，但我没有做任何事情使字体显示在前端......我做错了什么？我错过了哪一步？？

【问题讨论】：

标签： css ionic-framework fonts sass ionic3

【解决方案1】：

将你的字体放入源文件夹（src/assets/fonts/CHESSMASTER8000_BOLD.ttf），然后像这样在 variables.scss 文件中连接它

@font-face {
  font-family: "Chessmaster-8000";
  font-style: bold;
  src: url('../assets/fonts/CHESSMASTER8000_BOLD.woff');
}

【讨论】：