关于sass：@include字体SCSS问题


@include font-face SCSS issue

在尝试让我的SCSS导入某些字体时，遇到以下问题：

我完全从罗盘网站上复制了文档，但是在编译CSS时，Compass在我的src URL后面添加了随机数。我编写的SCSS代码和生成的CSS看起来像这样

SCSS

1
@include font-face("NexaBold", font-files("nexa_bold-webfont.woff","nexa_bold-webfont.ttf","nexa_bold-webfont.svg","nexa_bold-webfont.eot"));

生成的CSS

1
2
3
4
@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编译您的代码，结果是：

1
2
3
@font-face {
  font-family:"NexaBold";
  src: font-files("nexa_bold-webfont.woff","nexa_bold-webfont.ttf","nexa_bold-webfont.svg","nexa_bold-webfont.eot"); }

这是我的font-face mixin指南针源：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@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，请使用以下代码：

1
2
3
4
5
6
7
8
@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中：

1
asset_cache_buster :none