22

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

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

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

8 回答 8

12

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

我用最新的稳定版本（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 中的相对位置

在这里查看 http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

于 2014-12-04T12:37:34.203 回答
9

我正在使用必须添加的 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 。

于 2015-05-21T10:52:36.513 回答
2

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

});
于 2016-04-07T13:04:43.070 回答
1

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

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

这为我解决了。更多上下文在这里。

于 2015-05-18T20:22:59.037 回答
1

我知道这有点晚了，但我只想分享我的答案。我使用 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/*',
          ]
        }
    ]
  }
}
于 2015-09-24T08:07:11.330 回答
0

如果您使用“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)
        ];
      }
于 2015-05-12T20:43:58.213 回答
0

与 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']
        }]
     },
于 2017-03-23T03:18:48.490 回答
0

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

    //..
}
于 2016-11-22T10:49:02.400 回答