带有Gulp的远程导入字体

Question

所以我注意到我目前的Gulp设置没有导入谷歌字体等远程字体.在我的main.scss档案中,我有:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic);

当它编译缩小时,它看起来像这样:

@font-face{font-family:Lato;font-style:normal;font-weight:100;src:local('Lato Hairline'),local('Lato-Hairline'),url(../../fonts.gstatic.com/s/lato/v11/zJY4gsxBiSo5L7tNutxFNg.ttf) format('truetype')}

我正在使用gulp-minify-css哪个使用clean-css.我知道你可能需要做些什么来让远程导入正常工作,但阅读文档会给我留下更多问题然后回答.这是我的gulp文件的一部分,用于处理Sass/CSS缩小:

// Minimize CSS
gulp.task('minify-css', function() {
  return gulp.src('css/src/*.css')
    .pipe(minifyCss({
        compatibility: 'ie8',
        aggressiveMerging: false
        }))
    .pipe(gulp.dest('css/'));
});

任何帮助,将不胜感激!谢谢.

Answer 1

您的问题是由于缺少 sass 来导入 css 文件。您需要复制 css 文件并将其重命名为 *.scss 文件。scss文件可以正确导入。

您需要安装并需要 gulp-rename：https://www.npmjs.com/package/gulp-rename

在您的示例中，您还可以考虑使用 gulp-google-webfonts：https://www.npmjs.com/package/gulp-google-webfonts

字体列表：

Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic

gulpfile.js：

var gulp = require('gulp');
var googleWebFonts = require('gulp-google-webfonts');

var options = { };

gulp.task('fonts', function () {
    return gulp.src('./fonts.list')
        .pipe(googleWebFonts(options))
        .pipe(gulp.dest('out/fonts'))
        ;
    });

gulp.task('default', ['fonts']);