Szyny 4: Dlaczego czcionki nie ładują się podczas produkcji?

Question

Nie mogę załadować czcionek w mojej aplikacji Rails 4 w produkcji, działa ona normalnie w fazie rozwoju.

Zasoby są prekompilowane na serwerze podczas wdrażania.

mam czcionek w

app/assets/fonts

Moja app.css:

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

W moim production.rb mam:

config.assets.precompile << Proc.new { |path| 
    if path =~ /\.(eot|svg|ttf|woff)\z/ 
    true 
    end 
} 

Answer 1

Mieliśmy ten problem ostatni Tydzień - problem polega na tym, że twoje zasoby zostaną skompilowane tak, by zawierały skróty MD5, cokolwiek t Twój standardowy CSS nadal będzie szukał swoich "standardowych" nazw. Jest to problem z czcionkami &.

@font-face { 
    font-family: 'akagi'; 
    src: asset_url('fonts/akagi-th-webfont.eot'); 
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'), 
     asset_url('fonts/akagi-th-webfont.woff') format('woff'), 
     asset_url('fonts/akagi-th-webfont.ttf') format('truetype'), 
     asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg'); 
    font-weight: 300; 
    font-style: normal; 
} 

Jest to przykład tego, jak należy korzystać z scss pliki do ładowania zasobów dynamicznie. Pliki te są kompilowane (przed push lub podczas init) do plików .css, wszystkie z ich zasobami poprawnie zsynchronizowane.

Mieliśmy podobny problem do was z Heroku, a udało się go uruchomić poprzez umieszczenie nasze pliki do /stylesheets/layout/fonts.css.scss a następnie wywołanie

@import '/layout/fonts'; 

Wezwaliśmy też nasza aplikacja .css -> application.css.scss do obsługi funkcji @import

Answer 2

Oto ogólny sposób rozwiązywania tego problemu dla dowolnej biblioteki. Błąd

odtworzyć na lokalnym

1. Run szyn serwer na produkcji

   1. Na terminalu rake assets:precompile

   2. to na config/environments/production.rb

      # Rails 4 production 
          # config.serve_static_files = true 
          # Rails 5, Uncomment to run production on local 
          # config.log_level = :debug 
          config.public_file_server.enabled = true 
      

   3. Na terminalu RAILS_ENV=production rails s
2. Powinieneś zobaczyć błąd w przeglądarce internetowej

rodziny czcionek Zastąp

1. application.css musi zostać zmieniona na application.scss od asset-url zostaną wykorzystane

2. Dodaj czcionki do precompile na plik config/initializers/assets.rb:

   Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ 
   

3. Poszukaj definicji twarzy czcionki wewnątrz swojej biblioteki CSS i skopiuj ją do application.scss.To powinno być coś takiego:

   @font-face { 
       font-family: 'my-library'; 
       src: url('../fonts/my-library.eot'); 
       src: 
       url('../fonts/my-library.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/my-library.woff2') format('woff2'), 
       url('../fonts/my-library.ttf') format('truetype'), 
       url('../fonts/my-library.woff') format('woff'), 
       url('../fonts/my-library.svg?#my-library') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   

4. Zmiana:

   @font-face { 
       font-family: 'my-library'; 
       src: asset-url('my-library/fonts/my-library.eot'); 
       src: 
       asset-url('my-library/fonts/my-library.eot?#iefix') format('embedded-opentype'), 
       asset-url('my-library/fonts/my-library.woff2') format('woff2'), 
       asset-url('my-library/fonts/my-library.ttf') format('truetype'), 
       asset-url('my-library/fonts/my-library.woff') format('woff'), 
       asset-url('my-library/fonts/my-library.svg?#my-library') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   

Jakie zmiany zostały wprowadzone

1. Zastosowanie asset-url zamiast url
2. Zmień ../fonts lub podobny do ścieżka, która asset-url rozumie.

Co ścieżka umieścić na aktywach URL

Aby dowiedzieć się, która ścieżka asset-url rozumie, przejdź do szyn konsolę i wprowadź Rails.application.assets.paths. Dostaniesz coś takiego:

[ 
    '/path/1', 
    '/path/2', 
    '/path/3', 
] 

Jeśli czcionki są na /path/2/my-library/fonts/ następnie użyć asset-url('my-library/fonts/my-library.eot').

Oznacza to, że usuwasz ścieżkę, którą znalazłeś pod numerem Rails.application.assets.paths.

Sprawdź napisał właściwą drogę

Na konsoli Rails na rozwój:

helper.asset_url('my-library/fonts/my-library.eot') 

powinien zwrócić:

"/assets/my-library/fonts/my-library-2517b97e2c0e1e6c8ceb9dd007015f897926bc504154137281eec4c1a9f9bdc9.eot" 

Uwaga tylna /assets/ i trawienia w ostatniej części.

Answer 3

1: - Zachowaj wszystkie swoje czcionki w folderze app/assets/fonts.

2: - Po aktywowaniu prowizji: prekompilacja RAILS_ENV = produkcja wszystkie twoje czcionki zostaną prekompilowane do folderu public/assets za pomocą skrótu.

3: - Zamiast używać src: url ("fontname.eot") użyj src: font_url ("fontname.eot") w plikach scss.