5

próbuję użyć kompasu font-face wstawek, który zawiera publikację
* .eot? Iefixaktywami rurociąg, kompas font-face i EOT? Iefix zadzwonić do czcionki

moim app/aktywa/fonts zawiera wszystkie potrzebne typy czcionek, w tym .eot.

Kiedy próbuję uruchomić aktywa: prekompilacji zadanie nie mówiąc coś takiego: webfont.eot iefix nie prekompilowana

Znasz możliwe rozwiązanie tego problemu?

To działa bez błędu w przypadku mam config.assets.compile = true, ale jak mam rozumieć to lepiej nie używać go w produkcji.

Odpowiedz

4

Właśnie rozwiązać ten problem z trochę (obsługiwane) włamać.

Utworzono nowy plik CSS font.css.erb i wstawiono @import "font" w miejsce deklaracji @font-face.

@font-face { 
    font-family: 'SketchBlockBold'; 
    src: font_url('font/sketch_block-webfont.eot'); 
    src: url('<%= asset_path('font/sketch_block-webfont.eot')+"?#iefix" %>') format('embedded-opentype'), 
     font_url('font/sketch_block-webfont.woff') format('woff'), 
     font_url('font/sketch_block-webfont.ttf') format('truetype'), 
     url('<%= asset_path('font/sketch_block-webfont.svg')+"#SketchBlockBold" %>') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Zwróć uwagę na użycie ścieżki zasobów i konkatenację specjalnych zakończeń plików.

+0

dlaczego używać zarówno 'font-url' i' deklaracji url'? co za różnica? – pruett

+0

Dzieje się tak, ponieważ url() nie jest funkcją potoku zasobów, ale font_url() jest. W tym przypadku zasadniczo zamieniam magię font_url() na rzeczy w erb –

+0

Dzięki za sugestię! Kod działa idealnie dobrze lokalnie, ale 'rake assets: precompile' powraca do tego samego błędu:' fontname.eot nie jest prekompilowany' Co może być problemem, jak myślisz? – lyuba

10

Można to zrobić z czystym SCSS TOO:

@font-face { 
    font-family: 'DroidSans'; 
    src: url(font-path('DroidSans-webfont.eot')); 
    src: url(font-path('DroidSans-webfont.eot') + '?#iefix') format('embedded-opentype'), 
     url(font-path('DroidSans-webfont.woff')) format('woff'), 
     url(font-path('DroidSans-webfont.ttf')) format('truetype'), 
     url(font-path('DroidSans-webfont.svg') + '#DroidSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
+0

zamiast 'url (font-path())' możemy użyć 'font-url()' – nXqd

+1

Wierzę, że możesz teraz. W tym czasie był konflikt między pomocnikami Sassa i pomocnikami Rails. –