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

css3 ruby-on-rails-3.1

Question

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.

Answer 1

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

Answer 2

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'') %>'');

Answer 3

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 :)

Answer 4

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.

Answer 5

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''.

Answer 6

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

Answer 7

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