使用 Gulp 远程导入字体
Remote Import Fonts with Gulp
所以我注意到我当前的 Gulp 设置没有导入远程字体,例如 google 字体。在我的 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/'));
});
如有任何帮助,我们将不胜感激!谢谢。
您的问题是由于缺少 sass 来导入 css 文件。您需要复制 css 文件并将其重命名为 *.scss 文件。 scss文件可以正确导入
您将需要安装并要求 gulp-重命名:https://www.npmjs.com/package/gulp-rename
对于您的示例,您还可以考虑用户 gulp-google-webfonts: https://www.npmjs.com/package/gulp-google-webfonts
fonts.list:
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']);
所以我注意到我当前的 Gulp 设置没有导入远程字体,例如 google 字体。在我的 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/'));
});
如有任何帮助,我们将不胜感激!谢谢。
您的问题是由于缺少 sass 来导入 css 文件。您需要复制 css 文件并将其重命名为 *.scss 文件。 scss文件可以正确导入
您将需要安装并要求 gulp-重命名:https://www.npmjs.com/package/gulp-rename
对于您的示例,您还可以考虑用户 gulp-google-webfonts: https://www.npmjs.com/package/gulp-google-webfonts
fonts.list:
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']);