ui-grid 글꼴 파일을 프로젝트에 포함하는 방법

ui-grid 글꼴 파일을 프로젝트에 포함하는 방법

저는 Anjularjsui-grid에 갇혀있는데 아이콘 대신 중국어 기호가 표시됩니다.이에 대해 자세히 조사한 후 ui-grid 팀에서 제공하는 글꼴 파일을 사용해야 한다는 것을 알게 되었고, 파일을 다운로드하여 프로젝트에 포함시켰지만 여전히 올바른 아이콘 이미지와 글꼴을 얻지 못하고 있습니다. 이러한 파일을 프로젝트에 포함하는 방법은 무엇입니까?

다운로드하여 프로젝트에 포함시킨 파일 이름은 다음과 같습니다.

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

저도 같은 문제가 있었는데, 지금은 다음과 같이 수정되었습니다.

나는 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_설치를 확인합니다.

추가해야 할 그룬트를 사용하고 있습니다.

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디렉토리 입니다.

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

});

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

이것으로 해결했습니다.여기에 더 많은 맥락이 있습니다.

조금 늦었지만 답을 나누고 싶습니다.저는 bower를 사용하여 ui-grid를 설치하고 gruntjs를 설치하여 파일을 로드합니다.판치즈의 답변과 거의 비슷하지만 로 변경합니다.*.{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/*',
          ]
        }
    ]
  }
}

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

프로젝트에서 글꼴 파일을 넣을 때 보통 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'
    ]);

    //..
}

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

언급URL : https://stackoverflow.com/questions/26942350/how-to-include-ui-grid-font-files-into-the-project