ionicプロジェクトにカスタムフォントを正しく組み込む方法は？

Question

私のプロジェクトでは、scss-> cssコンパイルが設定されています。そして私は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'); 
} 

：よう _fonts.scss がどのように見えるかだ

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

。どうすればこの問題を解決できますか？

Answer 1

まず、フォント/フォルダーをwww /フォルダーに移動します。このように見えます。

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

次に、リソースを縮小していない場合、パスは1つのレベルだけオフになっている可能性があります。これは参照を修正するはずです。

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