图集1/2

正文 2630字数 469,860阅读

1.安装font-spider
安装好nodejs，然后执行：
npm install font-spider -g
Run code
Cut to clipboard

    2.书写 CSS
    注意html页面引用的css必须是相对路径 不能使用绝对路径 否则fontspider不能识别
    /*声明 WebFont*/ @font-face { font-family: 'source'; src: url('../font/source.eot'); src: url('../font/source.eot?#font-spider') format('embedded-opentype'), url('../font/source.woff2') format('woff2'), url('../font/source.woff') format('woff'), url('../font/source.ttf') format('truetype'), url('../font/source.svg') format('svg'); font-weight: normal; font-style: normal; } /*使用指定字体*/ .home h1, .demo > .test { font-family: 'source'; }
    Run code
    Cut to clipboard

      特别说明： @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
      页面依赖的字体将会自动压缩好，原 .ttf 字体会备份，后期添加新字体只需要替换这个备份字体再重新提取即可。

      3.压缩字体 WebFont
      font-spider dest/news.html dest/index.html dest/about.html
      Run code
      Cut to clipboard

        font-spider github

        4.安装gulp插件
        npm install gulp-font-spider --save-dev
        Run code
        Cut to clipboard

          使用
          在项目根目录 gulpfile.js
          'use strict'; var gulp = require('gulp'); var fontSpider = require('./'); gulp.task('font', function() { return gulp .src('test/*.html') .pipe(gulp.dest('release')) .pipe(fontSpider({ silent: false, backup: false, ignore: ['\\.woff2$'] })); }); gulp.task('default', ['font']);
          Run code
          Cut to clipboard

            gulp-font-spider github
            var gulp = require( 'gulp' ); var fontSpider = require( 'gulp-font-spider' ); gulp.task('fontspider', function() { return gulp.src('./index.html') .pipe(fontSpider()); }); gulp.task('default', ['fontspider']);
            Run code
            Cut to clipboard

              Gulp-watch监听文件的保存
              var gulp = require( 'gulp' ); var fontSpider = require( 'gulp-font-spider' ); var watch = require( 'gulp-watch' ); gulp.task('font', function() { return gulp.src('./dest/*.html') .pipe(fontSpider()); }); gulp.task('auto',function(){ gulp.watch('./dest/1.html',['font']) }) gulp.task('default', ['auto']);
              Run code
              Cut to clipboard

                5.常见问题
                输入运行gulp-v 或gulp相关的命令（例如gulp less、gulp build）报错
                'gulp'不是内部或者外部命令，也不是可运行的程序或批处理文件

                问题分析：
                原因一：环境变量没有设置
                原因二：没有安装全局的gulp，只安装了本地gulp,命令行无法执行gulp-v，也无法执行gulp其它的相关命令

                解决方法：
                解决方法一：设置环境变量
                npm config get prefix
                Run code
                Cut to clipboard

                  这个地址就是那个系统变量PATH

                  解决方法二：全局安装gulp
                  npm install gulp -g
                  Run code
                  Cut to clipboard

                    两种方法配置完成之后，命令提示符都需关闭之后，再重新打开，才能起作用。
                    没有安装全局的gulp，只安装了本地gulp,命令行无法执行gulp-v，也无法执行gulp其它的相关命令。

                    Gulp默认运行的错误
                    1.在每个任务流的开始加一个return 关键字

                    2.命令行cmd命令提示符运行gulp出现提示错误
                    gulp Task 'default' is not in your gulpfile

                    是github文档写错了，defualt
                    应该是
                    default
                    Run code
                    Cut to clipboard

                      我们再次运行Gulp命令

                      参考文档：
                      如何在网页中解决设计师留给你的字体问题？
                      使用Gulp+fontspider按需压缩中文字体，自由引入webfont还原设计
                      前端构建工具gulp入门教程
                      gulp详细入门教程