字体目录问题

Question

我有问题，试图让我所有的字体工作后，我抱怨构建。当我“呼呼发球”时，我的应用程序字体工作得很好。

问题是我的一些bower组件css文件使用的字体目录与grunt的预期目录不同。

如果要在构建过程中复制字体，Grunt需要app/styles/fonts/格式的字体

我在app/font中放置了一个自定义字体(我可以在我的主css中更改它，所以这不是一个大问题)

@font-face {
font-family: 'iec_unicoderegular';
src: url('../font/Unicode_IEC_symbol/Unicode_IEC_symbol.eot');
src: url('../font/Unicode_IEC_symbol/Unicode_IEC_symbol.eot?#iefix') 

materialize.css希望在../font/roboto/和../font/material-design-icons中使用字体

@font-face {
font-family: "Roboto";
src: url("../font/roboto/Roboto-Thin.woff2") format("woff2"), 

@font-face {
font-family: "Material-Design-Icons";
src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"),

materialdesignicons.css希望在../fonts/中使用字体

@font-face {
font-family: 'MaterialDesignIcons';
src: url("../fonts/materialdesignicons-webfont.eot?v=1.0.62");

我不想更改bower组件中的css，而是我的gruntfile.js中是否有更改，可以获取所有字体源并将其合并为一个字体文件，然后在构建期间修改css以反映这些更改？如果不是，处理这个问题的最好方法是什么？我的gruntfile.js原封不动。谢谢

Answer 1

我绝对不是专家。我在遇到同样的问题后找到了你的问题。为了完整起见，我将在这里包含所有步骤。

我用bower安装了roboto-fontface包：

bower install roboto-local --save

然后我跑了

grunt build

这确保了roboto-fontface css文件被注入到我的index.html文件中：

<link rel="stylesheet" href="bower_components/roboto-fontface/roboto-fontface.css" />

它还更新了dist目录，这样我就可以看到roboto字体的实际效果了。

不幸的是，字体没有复制到我的dist目录中。注意，我确实有一个字体目录，但这是用于bootstrap字体。我的dist目录如下所示：

   |-fonts
   |-images
   |-scripts
   |-styles

roboto-fontface CSS文件在dist/styles/fonts/中查找字体：

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin.eot');
    src: url('fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin.woff2') format('woff2'),
         url('fonts/Roboto-Thin.woff') format('woff'),
         url('fonts/Roboto-Thin.ttf') format('truetype'),
         url('fonts/Roboto-Thin.svg#Roboto') format('svg');
    font-weight: 100;
    font-style: normal;
}

我认为最好的做法就是把字体放在那里，而不是修改任何css文件。我在Gruntfile.js中修改了copy dist规则，添加了：

{
expand: true,
cwd: 'bower_components/roboto-fontface/',
src: 'fonts/*',
dest: '<%= yeoman.dist %>/styles/'
}

这会将roboto-fontface样式目录中的所有内容复制到样式的字体sub-directory中。

我的新的、有效的dist目录如下所示(注意styles的font子目录)

  |-fonts
  |-images
  |-scripts
  |-styles
  |---fonts

我不确定修改copy-dist规则的确切位置，所以为了完整起见，下面是我的新规则的完整部分：

// Copies remaining files to places other tasks can use
copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'images/{,*/}*.{webp}',
        'styles/fonts/{,*/}*.*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    },
    **{
      expand: true,
      cwd: 'bower_components/roboto-fontface/',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>/styles/'
    }**]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},