Я застрял с анюлярной ui-сеткой, на которой вместо значков изображены некоторые китайские символы. После копания я узнаю, что мне нужно использовать некоторые файлы шрифтов, предоставленные командой ui-grid, я загрузил файлы и включил их в свой проект, но все еще не получал правильные изображения и шрифты значков, как включать эти файлы в проект?
Это имена файлов, которые я загрузил и включил в мой проект:
1 ui-grid.eot
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff
У меня была такая же проблема, теперь она исправлена следующим образом
Я обновил 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
Я использую 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.
С помощью 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, которая будет добавлена как 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/'));
});
Это решило это для меня. Больше контекста здесь.
Я знаю это немного позже, но я просто хочу поделиться своим ответом. Я использую 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/*',
]
}
]
}
}
Если вы устанавливаете сетку ui, используя "bower install", чем файлы должны быть установлены в соответствующем месте. Проблема в том, что мы используем 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. Но я думаю, что это не очень хорошая идея, потому что тогда вам нужно изменить этот файл для каждого обновления поставщика.
Таким образом, вы можете настроить свой ворчание, чтобы поместить этот конкретный шрифт вместе с файлами вашего поставщика.
Это ваш 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']
}]
},