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
No recuerdo las terribles advertencias de la declinación de la fuente tradicional
Maneja internamente url_helper y formatea las declaraciones para usted
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;
}