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的字体部分，并假设这是调用fonts文件夹中的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');
}

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

1 个答案: