Jak używać czcionek w Rails 4

Mam aplikację Rails 4 i próbuję użyć niestandardowej czcionki.

Śledziłem wiele samouczków na ten temat i jakoś to nie działa dla mojej aplikacji.

Używam application.css.less i mam następującą deklarację: 

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');
}

Uwaga: próbowałem używać url() zamiast font-url() również. Pierwszy generuje błędy 404 na konsoli, gdzie ten drugi po prostu nie wydaje się nic robić. W Chrome Dev tools w obszarze Zasoby Pliki Czcionek nie są wyświetlane w assets folder, lub gdziekolwiek

W moim config/application.rb mam: 

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

I w moim config/environments/development.rb i config/environments/production.rb mam: 

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

Moje pliki czcionek znajdują się w app/assets/fonts i nie są zawarte w folderze poniżej...

Co mi umyka?

UPDATE:

Struktura folderów 

app
└── assets
    └── fonts
        ├── HDV_Peace.eot
        ├── HDV_Peace.svg
        ├── HDV_Peace.ttf
        └── HDV_Peace.woff
Author: Bitswazsky, 2013-08-17
Source

9 answers

Twoja deklaracja @font-face jest bardzo bliska, brakuje tylko prefiksu /assets w deklaracji url.

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');
}

Wszystko, co zostało dodane do assets.paths jest dostępne bezpośrednio pod ścieżką /assets zarówno w rozwoju, jak i produkcji. Potrzebujesz tylko linii modyfikacji ścieżki zasobu w application.rb, wykonanie jej ponownie w development.rb i production.rb jest po prostu zbędne.

Dodatkowo, wszystkie formaty czcionek są zasadniczo binarne. Nie ma potrzeby, aby wstępnie skompilować je, więc można bezpiecznie usunąć dodatek assets.precompile.

 60
Author: Parker Selbert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-05 21:52:19

W Rails 4 znajduje się helper do ustawiania ścieżki dla czcionek.

Jeśli masz czcionkę w /assets/fonts lub vendor/assets/fonts, Rails 4 je znajdzie! Aby to wykorzystać, w pliku Bootstrap Zmień wywołanie @font_face na 

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       font-url('glyphicons-halflings-regular.woff') format('woff'), 
       font-url('glyphicons-halflings-regular.ttf') format('truetype'), 
       font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Zauważ, że przed plikami czcionek nie ma specyfikacji folderu. Jest to uzupełniane przez rails helper.

 52
Author: Nalin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-10 09:07:11

Proszę nie koduj twardo katalogu czcionek, ponieważ lokalizacja jest dynamiczna.

Tak jak są wbudowane helpery dla obrazów, są też wbudowane helpery dla czcionek: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

Przykład: 

@font-face {
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
 20
Author: Mike Bethany,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-26 17:01:44

To działało dla mnie na aplikacji Rails 4.1.

  1. Dodaj czcionki pod `app / assets/fonts "
  2. zadzwoń do nich z".css.plik scss w następujący sposób: 
@font-face {
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 11
Author: rebagliatte,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-25 19:48:14

Uruchom ponownie 'rails server' po utworzeniu katalogu app/assets / fonts

 9
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-10 14:26:10

Znalazłem ten artykuł, aby rozwiązać wszystkie moje problemy.

Http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/

 5
Author: Ricky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-04 08:53:18

Jeśli macie problem z używaniem czcionek w Rails 5 wystarczy edytować app/assets/config/manifest.js

A następnie wstaw ten //= link_tree ../fonts

Jak używać:

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

A także nie zapomnij ponownie uruchomić serwera.

 3
Author: david.juntak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-31 16:46:49

Czasami czcionki nie są wykrywane z katalogu assets/fonts.

Jeśli bezpieczeństwo nie jest problemem, możemy umieścić katalog fonts w folderze publicznym. Będą wtedy dostępne na poziomie public/.

 2
Author: tjs7706,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-18 10:27:23

Zapomnij o zmianie czegokolwiek w Rails 4 w Twojej aplikacji.rb . Wystarczy dodać prefiks / assets / Jak powiedział @ Parker Selbert, a będzie działać: 

@font-face {
  font-family: 'custom-font-name';
  src: font-url('/assets/_folder_/fontX-webfont.eot');
  src: font-url('/assets/_folder_/fontX-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/_folder_/fontX-webfont.woff') format('woff'),
       font-url('/assets/_folder_/fontX-webfont.ttf') format('truetype'),
       font-url('/assets/_folder_/fontX-webfont.svg#sociconregular') format('svg');
  font-weight: normal;
  font-style: normal;

}
 1
Author: luigi7up,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-26 18:34:31