如何在ionic项目中正确地包含自定义字体？

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

我遇到了“未找到”状态。该如何解决这个问题？

附图：

- Billy Logan

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

- Brian

---

救命稻草。我想我甚至可以把它们放在“css / fonts”文件夹中，因为我怀疑编译不会影响它们。 - Billy Logan

你可以将字体文件夹更好地实现在资产中。 - Sireini

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

- JTrixx16