Question

我在尝试构建之后尝试让所有字体都能正常工作时遇到问题。当我＆＃34; grunt发球＆＃34;我的app字体工作正常。

问题是我的一些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文件。我修改了copy dist添加：{/ p>中的Gruntfile.js规则

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

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

我的新的，工作的dist目录看起来像（注意font的{{1}}子目录）

styles

我不确定修改copy-dist规则的确切位置，所以为了完整性，这里完全是我的新规则：

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

字体目录问题

1 个答案: