Korzystanie z czcionek w potoku zasobów Rails

Oto zwrot akcji:

Należy umieścić wszystkie czcionki w app/assets/fonts/, ponieważ będą domyślnie wstępnie skompilowane w stagingu i produkcji-będą wstępnie skompilowane po naciśnięciu przyciskuheroku .

Pliki Czcionek umieszczone w vendor/assets będą domyślnie , a nie wstępnie skompilowane na stagingu lub produkcji - nie będą działać na heroku. Źródło!

- @plapier, thoughtbot / bourbon

Mocno wierzę, że umieszczanie czcionek vendora w vendor/assets/fonts ma to o wiele większy sens niż umieszczenie ich w app/assets/fonts. Z te 2 linijki dodatkowej konfiguracji to mi dobrze wyszło (na Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

- @jhilden, thoughtbot / bourbon

Przetestowałem go również na rails 4.0.0. W rzeczywistości ostatnia linijka wystarcza do bezpiecznego prekompilowania czcionek z folderu vendor. Rozgryzienie tego zajęło kilka godzin. Mam nadzieję, że komuś to pomogło.

Jeśli nie chcesz śledzić przesuwania czcionek:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

Musisz użyć font-url w bloku @ font-face, a nie url

@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Jak również tej linii w aplikacji.rb, jak wspomniałeś (dla czcionek w app/assets/fonts

config.assets.paths << Rails.root.join("app", "assets", "fonts")

Oto moje podejście do korzystania z czcionek w potoku zasobów:

1) Umieść cały plik czcionki w app/assets/fonts/, w rzeczywistości nie masz ograniczeń, aby umieścić go w fonts Nazwa folderu. Możesz umieścić dowolną nazwę podfolderu. Np. app/assets/abc lub app/assets/anotherfonts. Ale Gorąco polecam umieścić go pod app/assets/fonts/ dla lepszej struktury folderów.

2) z pliku sass, używając helpera sass font-path, aby zażądać zasobów czcionek w ten sposób

@font-face {
    font-family: 'FontAwesome';
    src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
    src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
         url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
         url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
         url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
         url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3) Uruchom bundle exec rake assets:precompile z lokalnej Maszyny i zobacz swoje podanie.wynik css. Powinieneś zobaczyć coś takiego:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

Jeśli chcesz dowiedzieć się więcej o funkcjonowaniu potoku zasobów, zapoznaj się z poniższym prostym przewodnikiem: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Miałem ten problem na Rails 4.2 (z Rubim 2.2.3) i musiałem edytować czcionkę-awesome _paths.scss częściowo usuwa odniesienia do $fa-font-path i usuwa ukośnik przedni. Poniższy został złamany:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I następujące dzieła:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Alternatywą byłoby po prostu usunięcie ukośnika po interpolowanym $fa-font-path, a następnie zdefiniowanie $fa-font-path jako pustego ciągu lub podkatalogu z kończącym się ukośnikiem (w razie potrzeby).

Pamiętaj o przekompilowaniu zasoby i uruchom ponownie serwer w razie potrzeby. Na przykład w konfiguracji pasażerskiej:

prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart

Następnie przeładuj przeglądarkę.

Używam Rails 4.2, i nie mogę uzyskać footable ikony, aby pokazać się. Pokazywały się małe pudełka, zamiast ( + ) na zwiniętych rzędach i małych strzałkach sortujących, których się spodziewałem. Po zapoznaniu się z informacjami tutaj, zrobiłem jedną prostą zmianę w moim kodzie: Usuń katalog czcionek w css. Oznacza to, że zmień wszystkie wpisy css w ten sposób:

src:url('fonts/footable.eot');

Wyglądać tak:

src:url('footable.eot');

Miałem podobny problem, gdy niedawno uaktualniłem moją aplikację Rails 3 do Rails 4. Moje czcionki nie dziaĹ ' ajÄ ... poprawnie tak jak w Rails 4+, moĹźemy jedynie trzymaÄ ‡ je w katalogu app/assets/fonts. Ale moja aplikacja Rails 3 miała inną organizację czcionek. Musiałem więc skonfigurować aplikację tak, aby nadal działała z Rails 4+ mając moje czcionki w innym miejscu niż app/assets/fonts. Próbowałem kilku rozwiązań, ale po znalezieniu non-stupid-digest-assets gem, to po prostu sprawiło, że tak spokojnie.

Dodaj ten klejnot, dodając następujący wiersz do pliku klejnotów:

gem 'non-stupid-digest-assets'

Następnie uruchom:

bundle install

I na koniec dodaj następujący wiersz w config/initializers/non_digest_assets.RB plik:

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

W moim przypadku pierwotnym pytaniem było użycie asset-url bez wyników zamiast zwykłej właściwości url css. Używanie asset-url skończyło się dla mnie pracą w Heroku. Plus ustawianie czcionek w folderze /assets/fonts i wywołanie asset-url('font.eot') bez dodawania do niego żadnego podfolderu lub innej konfiguracji.

Jeśli Masz plik o nazwie rusztowania.css.scss, więc jest szansa, że nadpisuje wszystkie niestandardowe rzeczy, które robisz w innych plikach. Skomentowałem te akta i nagle wszystko zadziałało. Jeśli w tym pliku nie ma nic ważnego, równie dobrze możesz go usunąć!

Po prostu umieść swoje czcionki w folderze app / assets/fonts i ustaw ścieżkę automatycznego ładowania, gdy aplikacja zacznie używać pisania kodu w aplikacji.rb

Config.aktywa.ścieżki oraz

Następnie użyj poniższego kodu w css.

@ font-face {

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;

}

Thanks