@font-face в rails 4.0 с sass url не найден для пользовательских шрифтов

Привет всем в моем проекте rails я пытаюсь использовать пользовательские шрифты, кроме того, есть много ответов, связанных с этим вопросом, я следил за этим ответом, который не помогает редактировать development.rb file

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

пока он показывает No route matches [GET] "/assets/chalkduster-webfont.woff"

и я установил url как

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

}

больше, чем пытались font_path('') внутри источника, а также font-url() он никогда не работает..: (

Ответы

Ответ 1

Попробуйте asset-url(). Работает для меня.

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

Кроме того, я добавляю только путь шрифтов и прекомпиляцию дополнительных ресурсов в config/environment/production.rb

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

Не нужно добавлять в config/environment/development.rb, поскольку asset-url работает немного волшебным.

Ответ 2

Я нашел альтернативу, более удобную для реализации не требуемого импорта, и это: Вы можете преобразовать файл шрифта в текстовый файл базы 64. Убедитесь, что вы проверили выбор Base64 encode введите описание изображения здесь

затем нажмите конвертировать и загрузить ZIP файл, который генерирует страницу. Внутри .zip файла откройте файл .css, и вы увидите код, который вам нужен. введите описание изображения здесь

Я пытаюсь реализовать решение jverban, но для меня это не работает.

Затем я нашел туто, где объясняю два способа сделать это, щелкнуть для открытия тату

и я попробую второе решение (способ хакера). и единственное, что нужно сделать, - это перемещать папку шрифтов внутри таблицы app/assets/stylesheets. (я хочу, чтобы вы поместили все шрифты внутри папки с именем fonts)

то в файле css o scss вы можете сделать это с помощью этого кода.

@font-face {
    font-family: 'GoodDDC';
    src: url(asset_path("fonts/GOODDC.ttf"));
}

ссылка на ресурс_path на рельсах в папке app/assets/stylesheets

папка дерева выглядит как

app/assets/stylesheets/fonts/yourfont.ttf (wof, etc)