css css3 ruby-on-rails-3.1 font-face sass

css - ¿Usando @ font-face con la aplicación Rails 3.1?



css3 ruby-on-rails-3.1 (7)

Acabo de actualizar ese artículo en Atomic Object''s Spin blog. Aquí está el CSS convertido (estabas mirando la sintaxis de Sass)

@font-face { font-family: "Merriweather"; src: url(/assets/merriweather-black-webfont.eot); src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg"); font-weight: 900; font-style: normal; }

Tengo problemas para usar la siguiente declaración @font-face para trabajar con mi aplicación Rails 3.1. Puse las fuentes en Asset Pipeline en su propia carpeta llamada "Fonts" junto con images stylesheets y javascripts

Aquí está la declaración que utilicé (generada por Font Squirrel).

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

¿Alguien utiliza @ font-face con éxito en su aplicación Rails 3.1?

Actualizar

Acabo de leer este hilo http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ que decía cambiar la url a font-url en las declaraciones. Eso no pareció funcionar desafortunadamente.


Debe agregar la carpeta a la ruta de los activos (a file config/application.rb ), consulte las Guías de Rails

config.assets.paths << "#{Rails.root}/app/assets/fonts"

Y deberías usar el asistente asset_path :

src: url(''<%= asset_path(''Chunkfive-webfont.eot'') %>'');


Desde Rails 3.1 y superior puedes llamar a font-url directamente. Me gusta esto:

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

Espere que su css final se vea así:

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

Por lo general funciona :)


Estoy usando 3.1.1 y tengo mis fuentes en el proveedor / activos / tienda (implementación de Spree). Las soluciones dadas aquí no funcionaron para mí y finalmente probé lo que terminó siendo mi solución: no había necesidad de

Aquí hay un ejemplo de mi atributo src para EOT:

src: url(''1617A5_4.eot'');

Estoy un poco confundido por esto, pero parece que una vez que se compilan los activos, todos los activos se copian en su carpeta principal (assets / store /) en cuyo punto la hoja de estilos solo puede recogerlos.


Sé que esta es una vieja pregunta, pero me encontré con este problema con Rails 3.2, y después de leer el enlace a la documentación publicada anteriormente, no hubo necesidad de editar la aplicación.rb. Todo lo que tenía que hacer era hacer lo siguiente en mi hoja de estilo (usando sass)

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

Entonces, en lugar de usar url, utilicé el genérico asset-url, que toma 2 argumentos, el archivo y la clase de activo, en este caso ''font''.


Si bien es tarde, puedes usar la combinación de +font-face Compass para evitar todo este problema. El mixin ayuda a tu vida más fácil

  1. No recuerdo las terribles advertencias de la declinación de la fuente tradicional

  2. Maneja internamente url_helper y formatea las declaraciones para usted

  3. Es mucho más fácil de recordar

Se declara de la siguiente manera madams y caballeros:

+font-face("#{$font-name}", font-files("#{$font-name}.woff", woff, "#{$fontFileName}.ttf", ttf, "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);


Utilizando Rails 4.0 (no sé si esto es específico de 4, pero de todos modos), solo pude hacer que funcione con url(font_path(''font-name.ttf'')) . Tampoco era necesario agregar la ruta de las fuentes a la ruta de los activos ( config.assets.paths << "#{Rails.root}/app/assets/fonts" ).

Entonces, para mí esto es lo que funcionó:

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