如何使用postcss管理我网站上的托管字体？

Question

我是新手，我在管理网站中的托管字体时遇到问题。 有谁知道我应该怎么写在我的@fontface文件中创建style.css的gulp任务？ （我尝试使用此npm软件包（https://www.npmjs.com/package/postcss-font-magician#hosted），但没有用！）

这是我的任务（styles.js）：

var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
hexrgba = require('postcss-hexrgba'),
colorFunctions = require('postcss-color-function'),
fontMagician = require('postcss-font-magician')({
    hosted: ['../../app/assets/fonts']
});

gulp.task('styles', function() {
    return gulp.src('./app/assets/styles/styles.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, colorFunctions, 
     fontMagician, autoprefixer]))
    .on('error', function(errorInfo) {
      console.log(errorInfo.toString());
      this.emit('end');
    })
    .pipe(gulp.dest('./app/temp/styles'));
});

这是我的CSS代码：

body {
    font-family: 'parastoo';
}

这是我的源代码树：

|--app
|  |-- assets
|  |  |-- fonts
|  |  |   |-- parastoo.woff
|  |  |   |-- parastoo.woff2
|  |-- index.html
|-- gulp
|  |-- tasks
|  |  |-- styles.js
|-- gulpfile.js
|-- package.json
|-- webpack.config.js

非常感谢您。