@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問題

回答

相關問題