heroku - fuentes - font family react native

Cómo entregar fuentes desde un directorio no estándar utilizando Asset Pipeline

Question

Estoy tratando de incluir Fontawesome con una aplicación de Rails 4, sin embargo, los activos no están entrando en la cartera de activos. Sin embargo, las fuentes no están apareciendo en producción y no puedo entender por qué.

Estructura de archivos

Todos mis activos se almacenan en /assets/components para que Fontawesome aparezca en: /assets/components/font-awesome (están en un directorio diferente porque estoy usando Bower).

Archivo de manifiesto CSS

# application.css.scss
/* ...
*= require bootstrap/dist/css/bootstrap
*= require font-awesome/css/font-awesome
*= require_self
*= require_tree .
*/

El inventario de activos está configurado para precompilar fuentes

# Version of your assets, change this if you want to expire all your assets
config.assets.version = ''1.0''
config.assets.paths << Rails.root.join(''vendor'', ''assets'', ''components'')
# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
if path =~ //.(eot|svg|ttf|woff|otf)/z/
true
end
}

Agregué las instrucciones de precompilación para que todas las fuentes se precompilaran según esta pregunta

Se incluye la gema Heroku 12 Factor

#gemfile
group :production do
gem "rails_12factor"
end

¿Entonces, cuál es el problema?

Cuando presiono para Heroku, muestra que la aplicación está solicitando los archivos pero que no se están cargando:

Y al mirar los registros, parece ser un problema de enrutamiento: esperaba que la fuente se sirviera desde /assets/fonts pero aparentemente está buscando en /fonts

 app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000
app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000
app[web.1]:
app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/fontawesome-webfont.ttf"):

¿Por qué no se sirven los activos?

Estoy un poco confundido con todo esto. ¿Por qué no se sirven estas fuentes?

Answer 1

Este problema puede deberse a un motivo por el que los activos de Rails no pueden precompilar la función url() en un archivo CSS.

Debido a que sus archivos de fuentes están precompilados por activos, todas las direcciones apuntan a que estos archivos deben reescribirse a nombre de archivo digerido con MD5. Lamentablemente, Rails no puede precompilar url() automáticamente, al menos eso creo porque probé algunos casos y obtuve esta conclusión :) En la guía Rails, Rails proporciona estas funciones usando ERB y Sass. mira aquí

Creo que hay dos formas de resolver su problema.

El primero, establecer el directorio en .bowerrc en public/components y usarlos manualmente, no los requiere en sus activos.

El segundo, sugiero usar font-url() lugar de url() en Font-Awesome, por lo que su application.css.scss se verá así:

 /* ...
*= require bootstrap/dist/css/bootstrap
*= require font-awesome/css/font-awesome
*= require_self
*= require_tree .
*/
@font-face {
font-family: ''FontAwesome'';
src: font-url(''font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3'');
src: font-url(''font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3'') format(''embedded-opentype''),
font-url(''font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3'') format(''woff''),
font-url(''font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3'') format(''truetype''),
font-url(''font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular'') format(''svg'');
font-weight: normal;
font-style: normal;
}

Redefina la ruta de la fuente con su ruta de fuente real y la fuente de la fuente con font-url() , esta función es provista por sass-rails. Después de la precompilación, verá que su URL se ha reescrito en /assets/font-awesome/fonts/fontawesome-webfont-50b448f878a6489819d7dbc0f7dbfba0.eot?v=4.0.3 o algo así en public/assets/application-xxxxxx.css .

Puede encontrar el mismo enfoque en varias gemas que incluyen activos, por ejemplo, bootstrap-sass, es una gema muy popular. lea este archivo: _glyphicons.scss . Ya verás:

@font-face {
font-family: ''Glyphicons Halflings'';
src: font-url(''#{$icon-font-path}#{$icon-font-name}.eot'');
src: font-url(''#{$icon-font-path}#{$icon-font-name}.eot?#iefix'') format(''embedded-opentype''),
font-url(''#{$icon-font-path}#{$icon-font-name}.woff'') format(''woff''),
font-url(''#{$icon-font-path}#{$icon-font-name}.ttf'') format(''truetype''),
font-url(''#{$icon-font-path}#{$icon-font-name}.svg#glyphicons_halflingsregular'') format(''svg'');
}

url() ha sido reemplazado. Así que creo que rewrite @font-face en application.css.scss es la forma más simple :)

Por cierto, bootstrap y font-awesome tienen @font-face . No sé si font-awesome es necesario.

Cuando accede a la página, muestra el registro correcto. Por lo tanto, no es necesario cambiar ningún código en los repositorios de bower. Espero eso ayude.