Oficjalny sposób dodawania własnych czcionek do Rails 4?

Badam, jak dodać niestandardowe czcionki do mojej aplikacji Rails, np. poprzez dodanie folderu fonts w folderze assets - i nie mogę znaleźć "oficjalnego" sposobu Rails na to, jak to zrobić.

Tak, jest tu mnóstwo pytań/odpowiedzi na tak w tej sprawie, wszystkie pozornie z własnymi hackami. Ale czy taka powszechna praktyka nie powinna iść pod słynną "konwencją nad konfiguracją" Rails?

Lub jeśli to przeoczyłem-gdzie jest dokumentacja dotycząca organizowania czcionek w Aplikacja Rails?

Author: Numbers, 2014-01-21
Source

3 answers

Tak podany link wyjaśni to dobrze, jednak jeśli potrzebujesz innego szczegółowego wyjaśnienia, to tutaj jest

  • Po pierwsze, aby użyć niestandardowych czcionek w aplikacji, musisz pobrać pliki czcionek, możesz spróbować http://www.1001freefonts.com/

    Http://www.piccsy.com/everything-design/ i poszukaj czcionek

    Do najpopularniejszych formatów plików czcionek należą głównieotf (Open Type Format).ttf (True Type Format).woff(Web Open Font Format)

  • Pobrane czcionki można przenieść do folderu aplikacji w obszarze app / assets/fonts /

  • Po pobraniu pliku musisz "zadeklarować" czcionki, których będziesz używał w swoim css tak jak to 

    @font-face {
  font-family: "Kaushan Script Regular";
  src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}

  • Wreszcie możesz użyć rodziny czcionek, które właśnie zadeklarowałeś, gdziekolwiek chcesz w ten sposób 

    #e-registration {
  font-family: "Kaushan Script Regular";
}
Mam nadzieję, że to pomoże.
 56
Author: Nikhil Nanjappa,
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
2017-05-08 08:27:52

Po prostu to zrobiłem...

  1. Pobierz i zapisz pliki czcionek (eot, WOFF, woff2...) w Twoim zasoby/czcionki / katalog

    1. w Twoim config / aplikacji.RB Dodaj konfigurację tej linii.aktywa.ścieżki

Co to robi to jest to wstępnie skompiluje folder czcionek tak samo jak domyślnie z Twoim obrazy, arkusze stylów itp.

  1. I upewnij się, że ta linia jest ustawiona na true config.aktywa.enabled = true

  2. W Twoim sass/scss lub nawet inline z <script> tag

    @font-face { font-family: 'Bariol Regular'; src: font-url ('Bariol_Regular_Webfont/bariol_regular-webfont.eot');
    src: font-url ('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix") format ("eot"),
    font-url ('Bariol_Regular_Webfont/bariol_regular-webfont.woff") format ('woff'),
    font-url ('Bariol_Regular_Webfont/bariol_regular-webfont.ttf") format ('truetype'),
    font-url ('Bariol_Regular_Webfont/bariol_regular-webfont.svg # webfont3AwWkQXK") format ('svg'); font-weight: normal; font-style: normal; }

Zauważ, że powinieneś użyć helpera font-url zamiast css ' url aby zająć się odciskami palców wykonywanymi przez Rails podczas prekompilacji zasobów

Na koniec ustaw rodzinę czcionek w plikach CSS 

body {
   font-family: 'Bariol Regular', serif;
}

DARMOWA KOŃCÓWKA: Biorąc to pod uwagę, najlepszym sposobem pod względem wydajności jest skonfigurowanie tego za pomocą JS, aby te czcionki były ładowane asynchronicznie. Sprawdź ten ładowacz: https://github.com/typekit/webfontloader

 12
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
2016-06-08 08:23:45

Miałem pewne problemy z wyżej wymienionymi podejściami, ponieważ produkcja css nie wskazywała na skompilowaną czcionkę ttf, więc z powodzeniem zastosowałem to alternatywne podejście zapożyczone z https://gist.github.com/anotheruiguy/7379570:

  1. Umieszcza wszystkie pliki czcionek w assets/stylesheets/fonts. np. assets/stylesheets/fonts/digital_7.ttf.

  2. Zdefiniowałem w a .plik scss, którego używamy: 

    @font-face {
    font-family: 'Digital-7';
    src: asset-url('fonts/digital_7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

  3. Użyłem niestandardowej czcionki w innych .scss pliki: 

    .digital-font {
    font-family: 'Digital-7', sans-serif;
    font-size: 40px;
}

To powiedziane, znacznie czystszym sposobem jest umieszczenie definicji czcionki (digital_7_mono.ttf w tym przykładzie) na osobnej stronie.

Jeśli używasz Cloudfront, na przykład w katalogu Cloudfront o nazwie my_path, prześlij pliki czcionek, a następnie zdefiniuj plik css (np. digital_fonts.css) 

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

W Twoim html, wewnątrz znacznika <head>, Dodaj:

 1
Author: Julie,
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
2017-07-25 15:41:01