Javascript 使用Gulp远程导入字体
所以我注意到我当前的Gulp设置没有导入远程字体,比如google字体。在我的Javascript 使用Gulp远程导入字体,javascript,css,gulp,clean-css,gulp-clean-css,Javascript,Css,Gulp,Clean Css,Gulp Clean Css,所以我注意到我当前的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;f
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')}
我正在使用gulpminifycss
,它使用干净的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/'));
});
任何帮助都将不胜感激!谢谢。您的问题是由于缺少用于导入css文件的sass。您需要复制css文件并将其重命名为*.scss文件。可以正确导入scss文件 您需要安装并要求gulp重命名:
在你的例子中,你也可以考虑用户吞咽谷歌WebPosits:
字体列表: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']);
找到解决方案了吗?@Abhishek nope,从这篇文章开始,我们切换到了
gulp cssnano
,并改变了字体排队的方式,使其不再相关。谢谢,我们现在已经改变了项目中的字体管理方式,但是gulp google webfont
肯定会有用。谢谢你的回答。