Question

我的问题是我使用compass-importer和gulp，但是我的字体没有显示，看起来好像没有正确编译。

SASS

@font-face {
  font-family: "Mikado-Regular";
  src: font-files("../_fonts/Mikado/mikadoregular-webfont.woff", "../_fonts/Mikado/mikadoregular-webfont.woff2", "../_fonts/Mikado/mikadoregular-webfont.ttf"); 
}

编译CSS

@include font-face("Mikado-Regular", font-files("../_fonts/Mikado/mikadoregular-webfont.woff", "../_fonts/Mikado/mikadoregular-webfont.woff2", "../_fonts/Mikado/mikadoregular-webfont.ttf"));

font-face mixin没有正确显示。但是没有错误。

我很想知道这与我拥有的config.rb文件有什么关系（因为我之前使用的是Prepos，但似乎没有选项可以将compass-importer包括在内main.css 1}}。

奇怪的是我已将我的SASS路径更新为相对于config.rb，因此具有相对路径的font-face文件无关紧要，我仍然应该看到已编译的{{1}语法，甚至可能是浏览器查找字体时出现404错误。

我gulpfile.js的部分内容如下：

var gulp = require('gulp');
var sass = require('gulp-sass');
var compass = require('compass-importer')
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

// Setup SASS
gulp.task('sass', function() {
    return gulp.src('scss/main.scss')
    .pipe(sass({ importer: compass }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 version', 'ie 10'))
    .pipe(sass().on('error', sass.logError))
    .pipe(sass({
            sourceComments: 'map',
            sourceMap: 'sass',
            outputStyle: 'expanded'
        }))
    .pipe(gulp.dest('../../public/skins/website/_css'))
    .pipe(browserSync.stream());
});

我想尽可能避免使用gulp-compass，因为我想避免安装Ruby。

有没有人有任何想法？

Answer 1

事实证明compass-importer不处理文件或包含正确的mixin，就像使用指南针和ruby一样。 compass-importer根本不使用config.rb文件。

这是_font-face mixin，它不包括其他字体类型的格式类型语法。

@mixin font-face($name, $font-files, $eot: false, $weight: false, $style: false) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}

我的解决方案是只更新我的所有文件以包含详细的CSS，因为这种方式不依赖于compass或compass-importer。

我可以更改mixin，但担心如果有compass-importer的更新，它会被覆盖，因为我仍然需要包含它。

@font-face {
    font-family: 'Mikado-Regular';
    src: url('../_fonts/Mikado/mikadoregular-webfont.eot');
    src: url('../_fonts/Mikado/mikadoregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/Mikado/mikadoregular-webfont.woff2') format('woff2'),
         url('../_fonts/Mikado/mikadoregular-webfont.woff') format('woff'),
         url('../_fonts/Mikado/mikadoregular-webfont.ttf') format('truetype'),
         url('../_fonts/Mikado/mikadoregular-webfont.svg#intro_bold_capsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

使用指南针导入程序和gulp字体时没有正确编译

1 个答案: