0

我在 grunt build 后试图让我的所有字体工作时遇到问题。当我“咕噜咕噜”服务时，我的应用程序字体工作正常。

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

app/styles/fonts/如果要在构建期间复制字体，Grunt 想要字体

我有一个自定义字体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 未修改。谢谢

4

1 回答 1

0

我绝不是专家。在遇到同样的问题后，我发现了你的问题。为了完整起见，我将在此处包含所有步骤。

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目录中。注意，我确实有一个字体目录，但这是用于引导字体的。我的 dist 目录如下所示：

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

roboto-fontfaceCSS 文件正在寻找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 文件。我修改了添加copy dist规则Gruntfile.js：

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

这会将 robots-fontfacebower_components/roboto-fontface/fonts目录中的所有内容复制到样式的字体子目录中。

我的新的和工作的 dist 目录看起来像（注意 的font子目录styles）

  |-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'
  }
},
于 2015-08-25T11:50:14.483 回答