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

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

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

Answer 2

首先，将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');
}