我一直用anjularjs ui-grid卡住，它顯示了一些中文符號代替圖標。在深入瞭解之後，我得知我必須使用ui-grid團隊提供的一些字體文件，我下載了這些文件並將它們包含到了我的項目中，但仍然沒有得到正確的圖標圖像和字體，如何包含這些文件進入該項目？如何將ui網格字體文件包含到項目中
這些都是我下載幷包含在我的項目的文件名：
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和更改文件路徑在@字體面的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)
];
}
我用杯和我添加了一個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。
我使用的咕嚕聲我不得不添加
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/*',
]
}
]
}
}
隨着咕嘟咕嘟就可以到build.js文件
gulp.task('copyfonts', function() {
gulp.src('./bower_components/angular-ui-grid/**/*.{ttf,woff}')
.pipe(gulp.dest(path.join(conf.paths.dist, '/styles/')));
});
在我的項目，我通常使用的呼嚕聲把字體文件build/assets目錄中添加這個任務，供應商文件在build/vendor/lib-name目錄下。
但用戶界面。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']
}]
},
這些文件在同一個直接ry作爲你的ui-grid-unstable.css文件？在我的設置他們是，我沒有看到這些其他符號。我不記得需要做其他事情。 –