Angularjs 如何将ui网格字体文件包含到项目中

我一直在使用anjularjs的ui网格，它用一些中文符号代替图标。在深入研究之后，我知道我必须使用ui grid团队提供的一些字体文件，我下载了这些文件并将其包含到我的项目中，但仍然没有获得正确的图标图像和字体，如何将这些文件包含到项目中

以下是我下载并包含在项目中的文件名：

1 ui-grid.eot 
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff

---

我有同样的问题，现在它被纠正如下

我用最新的稳定版本（v3.0.0-rc.3）或不稳定版本（v3.0.0-rc.16）更新了Ui网格

然后 将所有字体文件放在ui-grid.css所在的目录中，如下所示

app
- lib
  - ui-grid.js
  - ui-grid.css
  - ui-grid.eot
  - ui-grid.svg
  - ui-grid.ttf
  - ui-grid.woff

或

您可以打开CSS并将文件路径更改为@font-face url中的相对位置

检查这里

---

如果使用“bower install”安装ui grid，则应将文件安装在正确的位置。我们遇到的问题是，我们使用的是ui路由器，它要求将所有请求重写为index.html。我们必须将字体扩展添加到重写规则中，以便Angular可以加载它们。我们正在使用一个中间件插件在本地运行。在Apache/Nginx服务器上，概念是相同的

middleware: function (connect) {
        return [
          modRewrite(['!\\.html|\\.js|\\.svg|\\.woff|\\.ttf|\\.eot|\\.css|\\.png$ /index.html [L]']),
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }

---

我正在使用Gulp，我添加了一个

font:dev

任务，作为dep添加到我的

service

任务中：

 gulp.task('fonts:dev', function () {
    return gulp.src($.mainBowerFiles())
      .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
      .pipe($.flatten())
      .pipe(gulp.dest(options.tmp + '/serve/fonts/'));
  });

---

这为我解决了问题。更多上下文。

我正在使用我不得不添加的Grunt

copy: {
      dist: {
        files: [
           ...
        //font di ui grid
         {
              expand: true,
              flatten: true,
              dest: 'dist/styles/',
              src: ['bower_components/angular-ui-grid/ui-grid.ttf',
                    'bower_components/angular-ui-grid/ui-grid.woff',
                    'bower_components/angular-ui-grid/ui-grid.eot',
                    'bower_components/angular-ui-grid/ui-grid.svg'
                    ]
            }
    ]},

---

到

grunfile.js

以复制

style

目录中的

ui网格

字体。

我知道有点晚了，但我只想分享我的答案。我使用bower安装ui网格，并使用gruntjs加载文件。与Panciz answer几乎相同，但将其更改为

*。{ttf、woff、eot、svg}

，以获取所需的所有字体文件，而无需指定它们

添加此副本：

copy: {
  dist: {
    files: [
      //other files here
      , {
          expand: true,
          flatten: true,
          cwd: '<%= yeoman.client %>',
          dest: '<%= yeoman.dist %>/public/app', //change destination base to your file structure
          src: [
            '*.{ttf,woff,eot,svg}',
            'bower_components/angular-ui-grid/*',
          ]
        }
    ]
  }
}

复制：{
地区：{
档案：[
//这里还有其他文件吗
, {
是的，
扁平化：是的，
cwd:“”，
dest:'/public/app'，//将目标库更改为您的文件结构
src:[
“*。{ttf，woff，eot，svg}”，
“bower_组件/角度ui网格/*”，
]
}
]
}
}

使用Gulp，您可以将此任务添加到build.js文件中

gulp.task('copyfonts', function() {
   gulp.src('./bower_components/angular-ui-grid/**/*.{ttf,woff}')
   .pipe(gulp.dest(path.join(conf.paths.dist, '/styles/')));

});

---

在我的项目中，我通常使用grunt将字体文件放在

build/assets

目录中，将供应商文件放在

build/vendor/lib name

目录中

但是ui-grid.css具有获取字体文件的相对路径，并且没有任何模式可以在不修改css文件的情况下配置不同的位置。但我认为这不是一个好主意，因为这样一来，您需要为每个供应商更新更改此文件

因此，您可以将grunt设置为将此特定字体与供应商文件一起使用

这是您的

build.config.js

：

module.exports = {
    ...
    vendor_files: {
        ...
        js: [
            'vendor/angular/bundle.min.js',
            'vendor/angular-ui-grid/ui-grid.min.js',
        ],
        css: [
            'vendor/angular-ui-grid/ui-grid.min.css',
        ],
        uigrid_fonts: [
            'vendor/angular-ui-grid/ui-grid.woff',
            'vendor/angular-ui-grid/ui-grid.ttf',
            'vendor/angular-ui-grid/ui-grid.eot',
            'vendor/angular-ui-grid/ui-grid.svg',
        ],
        ...
    }
    ...
}

然后在

Gruntfile.js上可以管理此文件：

module.exports = function (grunt) {

    grunt.loadNpmTasks('grunt-contrib-copy');
    //.. other require

    var userConfig = require('./build.config.js');
    var taskConfig = {
        copy: {
            //.. other copy task
            build_vendor_fonts: {
                files: [
                    {
                        src: [ '<%= vendor_files.fonts %>' ],
                        dest: '<%= build_dir %>/assets/fonts/',
                        cwd: '.',
                        expand: true,
                        flatten: true
                    }
                ]
            },
            build_uigrid_font: {
                files: [
                    {
                        src: [ '<%= vendor_files.uigrid_fonts %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true,
                    }
                ]
            },
            build_vendor_css: {
                files: [
                    {
                        src: [ '<%= vendor_files.css %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            },
            build_appjs: {
                files: [
                    {
                        src: [ '<%= app_files.js %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            },
            build_vendorjs: {
                files: [
                    {
                        src: [ '<%= vendor_files.js %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            }
        },
    };

    grunt.registerTask('build', [
        'clean', 
        'concat:build_css', 
        'copy:build_vendor_fonts', 
        'copy:build_uigrid_font',
        'copy:build_vendor_css', 
        'copy:build_appjs', 
        'copy:build_vendorjs', 
        'index:build'
    ]);

    //..
}

module.exports=函数（grunt）{
grunt.loadNpmTasks（'grunt-contrib-copy'）；
//…其他要求
var userConfig=require（'./build.config.js'）；
var taskConfig={
副本：{
//…其他复制任务
生成\u供应商\u字体：{
档案：[
{
src:['']，
dest:“/assets/fonts/”，
cwd:‘.’，
是的，
扁平化：真的
}
]
},
构建网格字体：{
档案：[
{
src:['']，
目的地：“/”，
cwd:‘.’，
是的，
}
]
},
构建\u供应商\u css：{
档案：[
{
src:['']，
目的地：“/”，
cwd:‘.’，
扩展：正确
}
]
},
构建应用程序：{
档案：[
{
src:['']，
目的地：“/”，
cwd:‘.’，
扩展：正确
}
]
},
build_vendorjs：{
档案：[
{
src:['']，
目的地：“/”，
cwd:‘.’，
扩展：正确
}
]
}
},
};
grunt.registerTask（'build'[
“干净”，
“concat:build_css”，
“复制：生成\u供应商\u字体”，
“复制：生成网格字体”，
“复制：生成\u供应商\u css”，
“复制：构建应用程序”，
'复制：build_vendorjs'，
“索引：构建”
]);
//..
}
答案与Panciz和Vicruz几乎相同，但我指定的相关目录略有不同：

copy: {
     dist: {
        files: [{
           // other files here...
        }, {
           expand : true,
           cwd : 'bower_components/angular-ui-grid',
           dest : '<%= yeoman.dist %>/styles',
           src : ['*.eot','*.svg','*.ttf','*.woff']
        }]
     },

复制：{
地区：{
档案：[{
//其他文件在这里。。。
}, {
是的，
cwd:“鲍尔_组件/角度ui网格”，
目标：'/styles'，
src:['*.eot'，'*.svg'，'*.ttf'，'*.woff']
}]
},
这些文件与您的ui-grid-unstable.css文件在同一目录下吗？在我的设置中，它们是，我没有看到这些其他符号。我不记得还需要做任何其他事情。解决这个问题的简单方法是不要使用CDN，让我们将文件本地构建到您的项目中。这里的问题是用户下载了这些文件，但不知道它们之间的关系ve文件路径替换。我已经通过在CSS文件中映射您的相对路径给出了答案。那么授权呢？这些文件没有在MIT（例如ui-grid.svg）下授权，我们可以将其用于商业用途吗？