如何正确地将自定义字体包含到离子项目中？

Question

在我的项目中设置了scss-＆gt; 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');
}

Answer 2

添加format值，如下所示：

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

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