如何正确包含离子项目的自定义字体？

Question

在我的项目中,它设置为scss-> css编译.我无法从scss文件夹中获取自定义字体.这是我的文件夹结构,以便更好地理解.

| scss/
  |-- basics/
    |--_fonts.scss
  |-- fonts/
    |-- lineto-circular-book.woff
    |-- lineto-circular-medium.woff
| www
  |-- lib/
    |-- ionic/
      |-- css/         
      |-- fonts/

这就是_fonts.scss的样子:

@charset "UTF-8";

@font-face {
  font-family: 'Circular-Medium';
  src: url('fonts/lineto-circular-medium.woff');
}

@font-face {
  font-family: 'Circular-Medium-Book';
  src: url('fonts/lineto-circular-book.woff');
}

我找不到状态了.我怎么解决这个问题？

Answer 1

首先,将fonts /文件夹移动到www /文件夹中,所以它看起来像这样.

| scss/
  |-- basics/
    |--_fonts.scss
| www
  |-- fonts/
    |-- lineto-circular-book.woff
    |-- lineto-circular-medium.woff

然后,如果您没有缩小资源,那么路径可能会偏离一个级别.这应该修复引用.

@font-face {
    font-family: 'Circular-Medium';
    src: url('../fonts/lineto-circular-medium.woff');
}

@font-face {
    font-family: 'Circular-Medium-Book';
    src: url('../fonts/lineto-circular-book.woff');
}