@include font-face SCSS vấn đề

Question

Trong khi cố gắng để có nhập khẩu SCSS tôi một số phông chữ tôi gặp phải như sau:

tôi chính xác sao chép the docs from the compass website, nhưng khi CSS đang được biên soạn Compass thêm số ngẫu nhiên đằng sau src URL của tôi. Mã SCSS tôi đã viết và CSS kết quả trông như thế này

SCSS

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

Kết quả 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'); 
} 

Cảm ơn!

Answer 1

Số ngẫu nhiên được thêm vì phông chữ bộ nhớ cache của trình duyệt dựa trên url, sau đó các số ngẫu nhiên này gây ra mỗi khi bạn biên dịch mã và đặt mã vào html, nó tải xuống phông chữ một lần nữa.

Tôi có Visual Studio 2013 và biên dịch mã của bạn với sass và kết quả là:

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

và đây là nguồn la bàn của tôi cho 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; 
    } 
    } 
} 

nếu bạn nhìn phiên bản la bàn của tôi doesn không thêm bất kỳ số ngẫu nhiên nào ở cuối đường dẫn tệp.

Bản thân tôi đề nghị bạn sử dụng font-face mà không la bàn, sử dụng mã bên dưới:

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

Answer 2

Chỉ cần thêm dòng này vào config.rb của bạn:

asset_cache_buster :none