Angularjs 如何使用bower/grunt正确管理字体

在我的项目中，我在我的bower.json中添加了一些使用字体的项目：

• 真棒
• 引导
• 机器人方脸

Grunt文件主要由“yo angular”生成，并进行了一些自定义编辑。字体在“grunt服务”开发模式下运行良好，但在我使用“grunt”进行dist构建时不起作用

问题是字体没有复制到我的dist文件夹。为了解决这个问题，我手动将Grunfile更改为copy:dist所有字体。像这样：

{
    expand: true,
    cwd: "<%= yeoman.app %>/bower_components/bootstrap/dist/fonts",
    dest: "<%= yeoman.dist %>/fonts",
    src: ["*.*"]
}

Grunt的配置正确，可以理解这一点，并将其添加到my index.html

但对于字体来说，唯一的解决方案似乎是修改我的gruntfile以添加copy:dist，然后在我的*css文件上进行某种regex替换。但是，例如，roboto fontface项目bower.json文件似乎也有一个很好的“main”，其中除了css文件外，还列出了所有字体

对我来说，合理的做法是，我应该能够配置我的GrunFile，以便它理解“main”参数具有字体，并自动将它们复制到我的dist/中，并用正确的路径替换我的css文件

当我向我的项目中添加新字体时，我必须编辑我的Grunfile文件，同时删除/更新字体

---

因此，问题很简单：如何才能最好地管理我的项目字体？最佳实践是什么？“酷孩子”是怎么做到的？

几周前我遇到了这个问题，我还使用了

yeoman angular generator

，还不得不调整copy:dist

在我的项目中，我使用了3种不同的字体，

font-awesome

、

lato

和

opensans

。我通过bower添加了

font-awesome

，但另外两个我手动下载并放在

app/font

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'views/{,*/}*.html',
        'images/{,*/}*.{png, jpg, jpeg, gif,webp}',
        //any new font you drop under app/fonts will be copied to dist
        'fonts/**'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: '.',
      src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome',
      src: ['fonts/*.*'],
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},
//rest of Gruntfile...

复制：{
地区：{
档案：[{
是的，
多特：没错，
cwd:“”，
目标：''，
src:[
“*.{ico，png，txt}”，
“.htaccess”，
“*.html”，
'views/{，*/}*.html'，
'images/{，*/}*{png，jpg，jpeg，gif，webp}'，
//您在app/fonts下放置的任何新字体都将复制到dist
“字体/**”
]
}, {
是的，
cwd:“.tmp/images”，
目标：'/images'，
src:['generated/*']
}, {
是的，
cwd:‘.’，
src:'bower_components/bootstrap sass official/assets/fonts/bootstrap/*'，
目标：“”
}, {
是的，
多特：没错，
cwd:“bower_组件/font-awesome”，
src:['fonts/*.']，
目标：“”
}]
},
风格：{
是的，
cwd:“/styles”，
目标：'.tmp/styles/'，
src:“{，*/}*.css”
}
},
//Gruntile的其余部分。。。

---

希望这有帮助

我遇到了同样的问题。你找到解决方案了吗？bootstrap使用一个变量来更改字体文件夹：$icon font path如果你使用sass或更少，roboto fontface也有这样的变量@tarini->

$roboto font path

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'views/{,*/}*.html',
        'images/{,*/}*.{png, jpg, jpeg, gif,webp}',
        //any new font you drop under app/fonts will be copied to dist
        'fonts/**'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: '.',
      src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome',
      src: ['fonts/*.*'],
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},
//rest of Gruntfile...