Sass @包括字体SCSS问题

Sass @包括字体SCSS问题,sass,compass-sass,compass,Sass,Compass Sass,Compass,在尝试让我的SCS导入一些字体时,我遇到了以下问题: 我完全复制了,但是在编译CSS时,Compass会在我的srcURL后面添加随机数。我编写的SCSS代码和生成的CSS如下所示 SCSS @include font-face("NexaBold", font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot")); @fon

在尝试让我的SCS导入一些字体时,我遇到了以下问题:

我完全复制了,但是在编译CSS时,Compass会在我的
src
URL后面添加随机数。我编写的SCSS代码和生成的CSS如下所示

SCSS

@include font-face("NexaBold", font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"));    
@font-face {
   font-family: "NexaBold";
   src: url('/fonts/nexa_bold-webfont.woff?1417439024') format('woff'), url('/fonts/nexa_bold-webfont.ttf?1417439024') format('truetype'), url('/fonts/nexa_bold-webfont.svg?1417439024') format('svg'), url('/fonts/nexa_bold-webfont.eot?1417439024') format('embedded-opentype');
}
结果CSS

@include font-face("NexaBold", font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"));    
@font-face {
   font-family: "NexaBold";
   src: url('/fonts/nexa_bold-webfont.woff?1417439024') format('woff'), url('/fonts/nexa_bold-webfont.ttf?1417439024') format('truetype'), url('/fonts/nexa_bold-webfont.svg?1417439024') format('svg'), url('/fonts/nexa_bold-webfont.eot?1417439024') format('embedded-opentype');
}

谢谢

添加随机数是因为浏览器缓存字体基于url,然后这些随机数导致每次编译代码并将其放入html时,都会再次下载字体

我使用Visual Studio 2013并使用sass编译您的代码,结果是:

@font-face {
  font-family: "NexaBold";
  src: font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"); }
这是我的
字体混合的指南针源代码:

@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('eot')"), $font-files; 
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}
如果你看,我的指南针版本不会在文件路径的末尾添加任何随机数

我建议您使用
字体
而不使用指南针,请使用以下代码:

@font-face {
    font-family: 'IranSans';
    src: url('/css/fonts/IranSans.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/IranSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/IranSans.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/IranSans.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/IranSans.svg') format('svg'); /* Legacy iOS */
}

只需将这一行添加到config.rb:

asset_cache_buster :none
可能的重复(通过Compass向源URL添加随机数称为“缓存破坏”,它用于各种源,而不仅仅是字体。)