@include font-face SCSS problem

Starając się mieć mój import SCSS niektórych czcionek I napotkał następujący:@include font-face SCSS problem

ja dokładnie kopiowane the docs from the compass website, ale jeśli CSS jest kompilowany Kompas dodaje liczb losowych za moich src adresów URL. Kod SCSS pisałem i otrzymaną CSS wygląda następująco

SCSS

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

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

dzięki!

Źródło

2014-12-01 Arnold Oosterom

możliwym duplikatu [Jak usunąć skrót z wygenerowanych przez Compassa plików graficznych sprite?] (http://stackoverflow.com/questions/9183133/how-to-remove-the-hash-from-compasss-generated-sprite-image-filenames) (Dodawanie liczb losowych do źródłowych adresów URL Kompas jest nazywany "pomijaniem pamięci podręcznej" i jest używany do różnych źródeł, nie tylko do czcionek.) – hon2a

Dodano losowe liczby, ponieważ czcionki pamięci podręcznej przeglądarki bazują na adresie URL, a następnie te przypadkowe liczby powodują, że za każdym razem, gdy kompilujesz kody i umieszczasz je w swoim html, ponownie pobiera czcionki.

mam Visual Studio 2013 i skompilować kod z Sass, a wynik jest:

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

i tu jest moje źródło kompas dla 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; 
    } 
    } 
}

jeśli spojrzeć moją wersję kompasu nie robi dodać dowolną liczbę losową na końcu ścieżki pliku.

ja proponuję użyć font-face bez kompasu, użyj kodu poniżej:

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

Źródło

2014-12-01 21:28:13

Wystarczy dodać tę linię do config.rb:

asset_cache_buster :none

Źródło

2015-06-02 20:52:15 nikopiko

@include font-face SCSS problem

Odpowiedz

Powiązane problemy