2013-10-11 13 views
15

ciao tutto nel mio progetto di rotaie sto provando ad usare caratteri personalizzati inoltre ci sono molte risposte relative a questa domanda ho seguito questa risposta che non aiuta il file modificato development.rb@ font-face su rails 4.0 con sass url non trovato per font personalizzati

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

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

ancora mostrando No route matches [GET] "/assets/chalkduster-webfont.woff"

e ho impostato mi url come

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

} 

più sopra cercato font_path('') all'interno della fonte e anche non funziona mai .. :(

risposta

32

Prova asset-url(). Per me va bene.

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

Inoltre, ho solo aggiungere il percorso font e precompilare attività aggiuntive in config/ambienti/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) 

non ha bisogno di essere aggiunto alla config/ambienti/development.rb come asset-url funziona un po 'di magia.

+1

Sembra che si può anche usare 'font-url ('nome_font')' invece di 'asset- url ('font_name', font) ' –

+3

Per me,' font-url' non funziona (link a /fonts/file.ext), mentre 'asset-url' funziona (link a /assets/file.ext) – FeifanZ

+0

per me ha funzionato con * .svg * .eot * .woff * .ttf su rotaie 4.1.1 – joseramonc

1

Ho trovato un'alternativa più facile da implementare importazioni non obbligatorie e questo è: È possibile convertire il file del font in un testo di base 64. Assicurati di controllare la codifica Base64 scelta enter image description here

quindi fare clic su Convert e scaricare il file .zip che generare la pagina. All'interno del file .zip apri de .css e vedi il codice che ti serve. enter image description here


cerco di implementare la soluzione del jverban ma per me, non lo fa opere.

poi ho trovato un tuto, in cui spiegano due modi todo esso, click for open the tuto

e cerco la seconda soluzione (Il senso di hacker). e l'unica cosa da fare è spostare la cartella dei caratteri all'interno dell'app/assets/stylesheet. (Suppongo che tu abbia inserito tutti i tuoi font all'interno di una cartella denominata fonts)

quindi nel file css o scss, puoi farlo con questo codice.

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

riferimento asset_path su rotaie cartella app/assets/stylesheets

cartella albero assomigliare

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