Как использовать шрифты в Rails 4

У меня есть приложение Rails 4, и я пытаюсь использовать собственный шрифт.

Я следил за многими учебными материалами по этому поводу и как-то просто не работал для моего приложения.

Я использую application.css.less и имею следующее объявление:

@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');
}

Примечание. Я попытался использовать url() вместо font-url(). Первая генерирует 404 ошибки на консоли, где последнее просто ничего не делает. В инструментах chrome dev под ресурсами файлы шрифтов не отображаются в папке assets или где-либо

в моем config/application.rb У меня:

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

И в моих config/environments/development.rb и config/environments/production.rb у меня есть:

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

Мои файлы шрифтов расположены в app/assets/fonts и не содержатся в папке ниже того, что...

Что мне не хватает?

UPDATE:

Структура папки 

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff

Ответы

Ответ 1

Ваше объявление @font-face очень близко, вы просто пропускаете префикс /assets в объявлении 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');
}

Все, что было добавлено в assets.paths, доступно непосредственно в пути /assets как в разработке, так и в производстве. Вам нужна только строка изменения пути к активу в application.rb, повторяя это в development.rb и production.rb просто избыточно.

Кроме того, все форматы шрифтов в основном двоичные. Нет необходимости предварительно компилировать их, поэтому вы можете безопасно удалить дополнение assets.precompile.

Ответ 2

В Rails 4 имеется помощник для установки пути для шрифтов.

Если у вас есть шрифт в /assets/fonts или vendor/assets/fonts, Rails 4 найдет их! Чтобы воспользоваться этим, в файле CSS Bootstrap измените вызов @font_face на

@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');
}

Обратите внимание, что перед файлами шрифтов нет спецификации папки. Это завершается помощником рельсов.

Ответ 3

Просьба не жестко указать каталог шрифтов, так как местоположение динамическое.

Так же, как и встроенные помощники для изображений, есть встроенные помощники для шрифтов: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

Пример:

@font-face {
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

Ответ 4

Это работало для меня в приложении Rails 4.1.

  • Добавьте шрифты под `app/assets/fonts`
  • Вызовите их из файла `.css.scss` следующим образом:
@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;
}

Ответ 5

Перезагрузите сервер рельсов после создания каталога app/assets/fonts

Ответ 7

Если у вас есть проблемы с использованием шрифтов в Rails 5, вам просто нужно отредактировать app/assets/config/manifest.js

И затем вставьте этот //= link_tree ../fonts

Как использовать:

@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; }

А также не забудьте перезагрузить сервер.

Ответ 8

Иногда шрифты не обнаруживаются из каталога assets/fonts.

Если безопасность не является проблемой, мы можем поместить каталог fonts в общую папку. Затем они будут доступны на уровне public/.

Ответ 9

Забудьте об изменении чего-либо в Rails 4 в приложении .rb. Просто добавьте префикс /assets/, например, @Parker Selbert, и будет работать следующее:

@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;

}