Google 使用 grunt 构建项目时字体不工作

Question

我正在使用 Google 字体，我在 .scss 文件中声明：

@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "../../bower_components/font-awesome/scss/font-awesome";
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300,700);
@import 'common';

在未构建项目时它正在工作。但是当我构建它时 (uglify/minify)。没用。

项目构建前：

项目构建后：

我用 yeoman 来 schafold 这个项目。这是在 'build':

上运行的任务

grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

其中之一必须以某种方式阻止 google 字体。

Answer 1

当您的 CSS 文件被丑化并且 @import url(http://fonts.googleapis.com/css?family=Quicksand:400,300,700); 行与没有空格的前一行连接时会发生这种情况。

虽然不理想，但我发现为这些类型的导入创建一个单独的 webfonts.scss 文件可以解决这个问题（但会创建一个额外的 css 文件以加载到您的应用程序中）

或者，您可以从 webfonts file 中获取内容并将 @font-face 规则直接复制到您的样式表中，而不是使用 @import。这似乎不太容易出错。

Google 使用 grunt 构建项目时字体不工作

Google font is not working when project is built with grunt

css

gruntjs

yeoman

yeoman-generator-angular