我一直被 anjularjs ui-grid 卡住，它显示了一些中文符号来代替图标。在深入研究之后，我知道我必须使用 ui-grid 团队提供的一些字体文件，我下载了这些文件并将它们包含到我的项目中，但仍然没有得到正确的图标图像和字体，如何包含这些文件进入项目？
这些是我下载并包含在项目中的文件名：
1 ui-grid.eot
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff
【问题讨论】：
我也遇到了同样的问题，现在解决如下
我用最新的稳定版本 (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
【讨论】：
如果您使用“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)
];
}
【讨论】：
我正在使用 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/'));
});
这为我解决了这个问题。更多上下文here。
【讨论】：
我正在使用我必须添加的 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，为了复制style目录下的ui-grid字体。
【讨论】：
我知道这有点晚了，但我只想分享我的答案。我使用 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/*',
]
}
]
}
}
【讨论】：
使用 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/')));
});
【讨论】：
在我的项目中，我通常使用 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']
}]
},
【讨论】：