tutorial rails learn español ejemplos descargar curso ruby-on-rails sass asset-pipeline font-face assets

ruby on rails - learn - Usando fuentes con el canal de activos de Rails



ruby on rails tutorial pdf (11)

Tengo algunas fuentes configuradas en mi archivo Scss así:

@font-face { font-family: ''Icomoon''; src: asset-url(''icoMoon.eot?#iefix'', font) format(''embedded-opentype''), asset-url(''icoMoon.woff'', font) format(''woff''), asset-url(''icoMoon.ttf'', font) format(''truetype''), asset-url(''icoMoon.svg#Icomoon'', font) format(''svg''); }

El archivo de fuente real se almacena en / app / asset / fonts /

He agregado config.assets.paths << Rails.root.join("app", "assets", "fonts") a mi archivo application.rb

y la fuente de compilación CSS es la siguiente:

@font-face { font-family: ''Icomoon''; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg"); }

Pero cuando ejecuto la aplicación no se encuentran los archivos de fuentes. Los registros:

Comenzó a obtener "/assets/icoMoon.ttf" para 127.0.0.1 a 2012-06-05 23:21:17 +0100 activo servido /icoMoon.ttf - 404 No encontrado (13ms)

¿Por qué la canalización de activos no está aplanando los archivos de fuentes en solo / los activos?

¿Alguna idea de la gente?

Saludos cordiales, Neil

Información extra:

Cuando se comprueban en la consola de los rieles las rutas de recursos y la compilación de activos, obtengo lo siguiente:

1.9.2p320 :001 > y Rails.application.config.assets.precompile --- - !ruby/object:Proc {} - !ruby/regexp /(?://|//|/A)application/.(css|js)$/ - .svg - .eot - .woff - .ttf => nil 1.9.2p320 :002 > y Rails.application.config.assets.paths --- - /Users/neiltonge/code/neiltonge/app/assets/fonts - /Users/neiltonge/code/neiltonge/app/assets/images - /Users/neiltonge/code/neiltonge/app/assets/javascripts - /Users/neiltonge/code/neiltonge/app/assets/stylesheets - /Users/neiltonge/code/neiltonge/vendor/assets/images - /Users/neiltonge/code/neiltonge/vendor/assets/javascripts - /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets - !ruby/object:Pathname path: /Users/neiltonge/code/neiltonge/app/assets/fonts => nil

  1. Si su versión de Rails está entre > 3.1.0 y < 4 , coloque sus fuentes en cualquiera de estas carpetas:

    • app/assets/fonts
    • lib/assets/fonts
    • vendor/assets/fonts


    Para las versiones de Rails > 4 , debe colocar sus fuentes en la carpeta app/assets/fonts .

    Nota: para colocar las fuentes fuera de estas carpetas designadas, use la siguiente configuración:

    config.assets.precompile << //.(?:svg|eot|woff|ttf)/z/

    Para versiones de Rails > 4.2 , se recomienda agregar esta configuración a config/initializers/assets.rb .

    Sin embargo, también puede agregarlo a config/application.rb o a config/production.rb

  2. Declara tu fuente en tu archivo CSS:

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

    Asegúrese de que su fuente tenga el mismo nombre que en la porción de URL de la declaración. Las mayúsculas y los signos de puntuación importan. En este caso, la fuente debe tener el nombre icomoon .

  3. Si está utilizando Sass o Less with Rails > 3.1.0 (su archivo CSS tiene extensión .scss o .less ), cambie la url(...) en la declaración de la font-url(...) a font-url(...) .

    De lo contrario, su archivo CSS debería tener la extensión .css.erb , y la declaración de la fuente debería ser url(''<%= asset_path(...) %>'') .

    Si está utilizando Rails > 3.2.1 , puede usar font_path(...) lugar de asset_path(...) . Este ayudante hace exactamente lo mismo pero es más claro.

  4. Finalmente, use su fuente en su CSS como lo declaró en la parte de la font-family . Si fue declarado en mayúscula, puedes usarlo así:

    font-family: ''Icomoon'';

Ahora aquí hay un giro:

Debería colocar todas las fuentes en app/assets/fonts/ ya que se precompilarán de forma predeterminada en la preparación y producción; se precompilarán cuando se envíen a Heroku .

Los archivos de fuentes colocados en el vendor/assets NO se precompilarán en la preparación o producción de forma predeterminada, fallarán en heroku . Source!

- @plapier, thoughtbot / bourbon

Creo firmemente que poner fuentes de proveedores en vendor/assets/fonts tiene mucho más sentido que ponerlas en app/assets/fonts . Con estas 2 líneas de configuración adicional, esto me ha funcionado bien (en Rails 4):

app.config.assets.paths << Rails.root.join(''vendor'', ''assets'', ''fonts'') app.config.assets.precompile << //.(?:svg|eot|woff|ttf)$/

- @jhilden, thoughtbot / bourbon

También lo he probado en rails 4.0.0 . En realidad, la última línea es suficiente para precompilar con seguridad las fuentes de la carpeta del vendor . Tomó un par de horas para averiguarlo. Espero que haya ayudado a alguien.

Aquí mi enfoque para usar fuentes en la tubería de activos:

1) Ponga todo su archivo de fuentes en app/assets/fonts/ , en realidad no está restringido para ponerlo bajo el nombre de la carpeta de fonts . Puede poner cualquier nombre de subcarpeta que desee. Por ejemplo, app/assets/abc app/assets/anotherfonts app/assets/abc o app/assets/anotherfonts . Pero te recomiendo que lo pongas en app/assets/fonts/ para una mejor estructura de carpetas.

2) Desde su archivo sass, use la font-path ayuda de sass para solicitar sus fuentes de fuentes como esta

@font-face { font-family: ''FontAwesome''; src: url(font-path(''fontawesome-webfont.eot'') + ''?v=4.4.0''); src: url(font-path(''fontawesome-webfont.eot'') + ''?#iefix&v=4.4.0'') format(''embedded-opentype''), url(font-path(''fontawesome-webfont.woff2'') + ''?v=4.4.0'') format(''woff2''), url(font-path(''fontawesome-webfont.woff'') + ''?v=4.4.0'') format(''woff''), url(font-path(''fontawesome-webfont.ttf'') + ''?v=4.4.0'') format(''truetype''), url(font-path(''fontawesome-webfont.svg'') + ''?v=4.4.0#fontawesomeregular'') format(''svg''); font-weight: normal; font-style: normal; }

3) Ejecute los bundle exec rake assets:precompile desde su máquina local y vea el resultado de su application.css. Debería ver algo como esto:

@font-face { font-family: ''FontAwesome''; src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0"); src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; }

Si desea saber más sobre cómo funciona la canalización de activos, puede visitar la siguiente guía simple: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

En mi caso, la pregunta original era utilizar asset-url sin resultados en lugar de la propiedad simple css de url . El uso de asset-url terminó trabajando para mí en Heroku. Además, configure las fuentes en la carpeta /assets/fonts asset-url(''font.eot'') /assets/fonts y llame a asset-url(''font.eot'') sin agregarle ninguna subcarpeta ni ninguna otra configuración.

Estoy usando Rails 4.2 y no pude mostrar los íconos de pies. Se mostraban pequeñas cajas, en lugar de (+) en las filas contraídas y las pequeñas flechas de clasificación que esperaba. Después de estudiar la información aquí, hice un simple cambio en mi código: eliminar el directorio de fuentes en css. Es decir, cambia todas las entradas de css así:

src:url(''fonts/footable.eot'');

para parecerse a esto:

src:url(''footable.eot'');

Funcionó. Creo que Rails 4.2 ya asume el directorio de fuentes, por lo que especificarlo nuevamente en el código css hace que no se encuentren los archivos de fuentes. Espero que esto ayude.

Necesitas usar font-url en tu @ font-face block, no url

@font-face { font-family: ''Inconsolata''; src:font-url(''Inconsolata-Regular.ttf'') format(''truetype''); font-weight: normal; font-style: normal; }

así como esta línea en application.rb, como mencionó (para las fuentes en app/assets/fonts

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

Si no desea realizar un seguimiento de cómo mover sus fuentes:

# Adding Webfonts to the Asset Pipeline config.assets.precompile << Proc.new { |path| if path =~ //.(eot|svg|ttf|woff)/z/ true end }

Si tiene un archivo llamado scaffolds.css.scss, entonces existe la posibilidad de que esté anulando todas las cosas personalizadas que está haciendo en los otros archivos. Comenté ese archivo y de repente todo funcionó. Si no hay nada importante en ese archivo, ¡también puede borrarlo!

Tenía este problema en Rails 4.2 (con ruby ​​2.2.3) y tuve que editar el tipo de ruta _paths.scss parcial para eliminar las referencias a $fa-font-path y eliminar una barra diagonal hacia delante. Lo siguiente fue roto:

@font-face { font-family: ''FontAwesome''; src: font-url(''#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}''); src: font-url(''#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}'') format(''embedded-opentype''), font-url(''#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}'') format(''woff2''), font-url(''#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}'') format(''woff''), font-url(''#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}'') format(''truetype''), font-url(''#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular'') format(''svg''); font-weight: normal; font-style: normal; }

Y los siguientes trabajos:

@font-face { font-family: ''FontAwesome''; src: font-url(''fontawesome-webfont.eot?v=#{$fa-version}''); src: font-url(''fontawesome-webfont.eot?#iefix&v=#{$fa-version}'') format(''embedded-opentype''), font-url(''fontawesome-webfont.woff2?v=#{$fa-version}'') format(''woff2''), font-url(''fontawesome-webfont.woff?v=#{$fa-version}'') format(''woff''), font-url(''fontawesome-webfont.ttf?v=#{$fa-version}'') format(''truetype''), font-url(''fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular'') format(''svg''); font-weight: normal; font-style: normal; }

Una alternativa sería simplemente eliminar la barra diagonal hacia adelante siguiendo la $fa-font-path $fa-font-path interpolada y luego definir $fa-font-path como una cadena o subdirectorio vacío con una barra diagonal hacia atrás (según sea necesario).

Recuerde volver a compilar los activos y reiniciar su servidor según sea necesario. Por ejemplo, en una configuración de pasajeros:

prompt> rake assets:clean; rake assets:clobber prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile prompt> service passenger restart

A continuación, vuelva a cargar su navegador.

Tuve un problema similar cuando actualicé mi aplicación Rails 3 a Rails 4 recientemente. Mis fuentes no funcionaban correctamente como en Rails 4+, solo se nos permite mantener las fuentes en el directorio app/assets/fonts . Pero mi aplicación Rails 3 tenía una organización de fuentes diferente. Así que tuve que configurar la aplicación para que aún funcione con Rails 4+ que tiene mis fuentes en un lugar diferente al de app/assets/fonts . He intentado varias soluciones, pero después de que encontré la gema de non-stupid-digest-assets , la hice tan fácil.

Agregue esta gema agregando la siguiente línea a su Gemfile:

gem ''non-stupid-digest-assets''

Entonces corre:

bundle install

Y finalmente agregue la siguiente línea en su archivo config / initializers / non_digest_assets.rb :

NonStupidDigestAssets.whitelist = [ //.(?:svg|eot|woff|ttf)$/ ]

Eso es. Esto solucionó mi problema muy bien. Espero que esto ayude a alguien que haya encontrado un problema similar como yo.

simplemente coloque sus fuentes dentro de la carpeta app / asset / fonts y configure la ruta de carga automática cuando la aplicación comience a escribir el código en application.rb

config.assets.paths << Rails.root.join ("app", "asset", "fonts") y

luego use el siguiente código en css.

@Perfil delantero {

font-family: ''icomoon''; src: asset-url(''icomoon.eot''); src: asset-url(''icomoon.eot'') format(''embedded-opentype''), asset-url(''icomoon.woff'') format(''woff''), asset-url(''icomoon.ttf'') format(''truetype''), asset-url(''icomoon.svg'') format(''svg''); font-weight: normal; font-style: normal;

}

Darle una oportunidad.

Gracias