web-dev-qa-db-ja.com

プロジェクトにui-gridフォントファイルを含める方法

私はanjularjsのui-gridで行き詰まっています。アイコンの代わりにいくつかの中国のシンボルが表示されています。それについて掘り下げた後、ui-gridチームから提供されたいくつかのフォントファイルを使用する必要があることを知ったので、ファイルをダウンロードしてプロジェクトに含めましたが、正しいアイコン画像とフォントが得られません。これらのファイルを含める方法プロジェクトに？

これらは私がダウンロードして私のプロジェクトに含めたファイル名です：

1 ui-grid.eot 
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff
angularjsangular-ui-grid
22
irfan shafi

同じ問題がありましたが、次のように修正されました

Uiグリッドを最新の安定バージョン（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

12
Felix

私は追加しなければならなかったグラントを使用しています

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ディレクトリにあります。

9
Panciz

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

});
2
arielduarte

少し遅れていることはわかっていますが、私の答えを共有したいと思います。私は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
Vicruz

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

これで解決しました。より多くのコンテキスト ここ 。

1
Jason Swett

私のプロジェクトでは通常、フォントファイルをbuild/assetsディレクトリに配置し、ベンダーファイルをbuild/vendor/lib-nameディレクトリに配置するためにgruntを使用しています。

ただし、ui-grid.cssにはフォントファイルを取得するための相対パスがあり、cssファイルを変更せずに別の場所を構成するモードはありません。しかし、ベンダーの更新ごとにこのファイルを変更する必要があるため、それは良い考えではないと思います。

そのため、ベンダーファイルにもこの特定のフォントを配置するようにうなり声を設定できます。

これはあなたの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
jedi

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']
        }]
     },
0
Gerald Scott

'bower install'を使用してuiグリッドをインストールする場合は、ファイルを適切な場所にインストールする必要があります。私たちが抱えていた問題は、すべてのリクエストをindex.htmlに書き換える必要があるui-routerを使用していることです。 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
Michael D Johnson