web-dev-qa-db-fra.com

@ font-face dans Rails 4.0 avec une URL Sass introuvable pour les polices personnalisées

Dans mon projet Rails, j'essaie d'utiliser des polices personnalisées. Il y a beaucoup de réponses liées à cette question, comme cette réponse qui n'a pas aidé, j'ai édité development.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 )

toujours il montre No route matches [GET] "/assets/chalkduster-webfont.woff"

Je me règle url comme:

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

}

J'ai essayé font_path('') dans la source et aussi font-url(), cela ne fonctionne jamais. :(

ruby-on-railsfontsruby-on-rails-4font-face
15
user1999510

Essayez asset-url(). Travaille pour moi.

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

De plus, je n’ajoute que le chemin des polices et précompile des ressources supplémentaires dans config/environnements/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 )

Il n’est pas nécessaire d’ajouter à config/environnements/development.rb car asset-url fonctionne un peu comme par magie.

32
Nicholas.V

J'ai trouvé une alternative plus facile à implémenter pour les importations non requises, à savoir: Vous pouvez convertir votre fichier de police en texte de base 64. Assurez-vous de bien cocher le choix Encoder Base64  enter image description here

puis cliquez sur convertir et téléchargez le fichier .Zip qui génère la page. Dans le fichier .Zip, ouvrez le fichier .css et vous voyez le code dont vous avez besoin.  enter image description here

j'essaie de mettre en œuvre la solution du jverban mais pour moi, cela ne fonctionne pas.

Ensuite, j'ai trouvé un tuto, où expliquer deux façons de le faire, cliquez pour ouvrir le tuto

et j'essaie la deuxième solution (la voie du pirate informatique). et le seul à faire est de déplacer le dossier des polices à l'intérieur de l'application/assets/stylesheets. (Je suppose que vous mettez toutes vos polices dans un dossier nommé polices)

puis dans le fichier css o scss, vous pouvez le faire avec ce code.

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

asset_path référence on Rails le dossier app/assets/stylesheets

le dossier de l'arbre ressemble à

app/assets/stylesheets/fonts/yourfont.ttf (wof, etc)
1
Juan David Zapata Yepes