logo标签列表

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

angularjsangular-ui-grid
22

我一直在使用angularjs的ui-grid，它显示的图标位置出现了一些中文符号。在深入了解后，我知道我必须使用ui-grid团队提供的一些字体文件，我下载了这些文件并将它们包含到了我的项目中，但仍然不能正确获取图标和字体，如何将这些文件包含到项目中？

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

1 ui-grid.eot 
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff
这些文件是否与您的ui-grid-unstable.css文件在同一个目录中？在我的设置中，它们是在同一个目录下的，我没有看到这些其他符号。我不记得还需要做其他任何事情。 - S. Baggy
8个回答
12

我曾经遇到过同样的问题，现在已经得到解决：

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

然后将字体文件放置在与你的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

这个问题的简单解决方案是不要使用CDN，而是将文件本地构建到您的项目中。 - irfan shafi
1
这里的问题是用户已经下载了文件，但不知道相对文件路径的替换。我通过在CSS文件中映射您的相对路径来提供答案。 - Felix
请在此处查看PF答案。https://dev59.com/qF8d5IYBdhLWcg3wlzD6 - Felix
许可证方面怎么样？这些文件不是根据MIT许可证发布的（例如ui-grid.svg），我们能用于商业目的吗？ - Srikanth Babu K
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'
                    ]
            }
    ]},

为了在style目录下复制ui-grid字体，请到Gruntfile.js中进行操作。

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

});
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/*',
          ]
        }
    ]
  }
}
1

我正在使用Gulp，并添加了一个名为fonts:dev的任务，以便将其作为依赖项添加到我的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/'));
  });

这对我解决了问题。更多背景在这里。
0
如果您使用“bower install”安装ui grid，则文件应该安装在其正确的位置。我们遇到的问题是，我们正在使用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)
        ];
      }
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'
    ]);

    //..
}
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']
        }]
     },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接