css - Ionic 3，需要帮助导入自定义字体(全新元素)

Question

我正在尝试将名为“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 文件，但我没有做任何事情使字体显示在前端......我做错了什么？我错过了什么步骤？？

Answer 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');
}