2014-12-01 33 views
5

Durante il tentativo di avere il mio SCSS importazione alcuni font che ho incontrato il seguente:@include font-face problema SCSS

ho copiato esattamente the docs from the compass website, ma quando il CSS viene compilato Compass aggiunge numeri casuali dietro i miei src URL. Il codice SCSS ho scritto e il CSS risultante assomiglia a questo

SCSS

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

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

Grazie!

+0

possibile duplicato di [Come rimuovere l'hash dai nomi di file immagine sprite generati da Compass?] (http://stackoverflow.com/questions/9183133/how-to-remove-the-hash-from-compasss-generated-sprite-image-filenames) (Aggiunta di numeri casuali agli URL di origine da Compass si chiama "busting della cache" ed è usato per varie fonti, non solo per i font.) – hon2a

risposta

7

Sono stati aggiunti numeri casuali perché i caratteri della cache del browser si basano sull'URL, quindi questi numeri casuali causano ogni volta che si compila il codice e lo si inserisce nel codice HTML, quindi scarica nuovamente i caratteri.

devo Visual Studio 2013 e compilare il codice con sass e il risultato è:

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

e qui è la mia fonte bussola per 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; 
    } 
    } 
} 

se si guarda la mia versione bussola doesn aggiungere qualsiasi numero casuale alla fine del percorso del file.

io suggerisco di utilizzare font-face senza bussola, utilizzare il codice qui sotto:

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

Basta aggiungere questa linea al vostro config.rb:

asset_cache_buster :none