Question

我一直坚持使用anjularjs ui-grid，它会显示一些中文符号代替图标。在深入了解之后我才知道我必须使用ui-grid团队提供的一些字体文件，我下载了文件并将它们包含在我的项目中，但仍然没有得到正确的图标图像和字体，如何包含这些文件进入项目？

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

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

Answer 1

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

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

然后将字体文件全部放在与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＆＃39>中的相对位置

点击这里 http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

Answer 2

我正在使用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'
                    ]
            }
    ]},

到Gruntfile.js为了复制ui-grid目录中的style字体。

Answer 3

使用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/')));

});

Answer 4

我正在使用Gulp，我添加了N任务作为dep添加到我的fonts:dev任务中：

serve

这为我解决了。更多背景here。

Answer 5

我知道它有点迟了但我只想分享我的答案。我使用bower安装ui-grid和gruntjs来加载文件。它几乎与Panciz的答案相同，但将其更改为*.{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/*',
          ]
        }
    ]
  }
}

Answer 6

如果使用“bower install”安装ui网格，则应将文件安装在正确的位置。我们遇到的问题是我们使用的是ui-router，它要求将所有请求重写为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)
        ];
      }

Answer 7

在我的项目中，我通常使用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'
    ]);

    //..
}

Answer 8

与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']
        }]
     },

如何将ui-grid字体文件包含到项目中

8 个答案: