html - 如何正确地将自定义字体包含到 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');
}

我处于未找到状态。我该如何解决这个问题？

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