@include字体面SCSS问题

在试图让我的SCSS进口一些字体我遇到以下：@include字体面SCSS问题

我精确复制the docs from the compass website，但是当CSS被编译罗盘增加了随机数字背后我src的网址。该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"));

得到的CSS

@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'); 
}

谢谢！

来源

2014-12-01 Arnold Oosterom

可能重复从指南针生成的精灵图像文件名？]（http://stackoverflow.com/questions/9183133/how-to-remove-the-hash-from-compasss-generated-sprite-image-filenames）（将随机数添加到源URL被Compass称为“缓存清除”，它被用于各种来源，而不仅仅是字体。） – hon2a 2014-12-01 21:23:04

随机号码被添加，因为浏览器缓存字体基于url，然后这些随机数字会导致您每次编译您的代码并将其放入您的html中时，它会再次下载字体。

我的Visual Studio 2013，并与上海社会科学院编译代码，结果是：

@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罗盘来源：

@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-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 */ 
}

来源

2014-12-01 21:28:13

只是这行添加到您的config.rb：中[如何删除哈希

asset_cache_buster :none

来源

2015-06-02 20:52:15 nikopiko

@include字体面SCSS问题

回答

相关问题