2012-09-08 39 views
22

Tengo un par de fuentes que me gustaría usar en mi aplicación RoR, pero sus formatos son principalmente .ttf y .otf, entre otros. ¿Cómo voy a incrustar estos archivos en mi aplicación Rails? Es decir, una vez que los puse en mi carpeta de activos, ¿cuál es exactamente la sintaxis para que los incruste en mis archivos CSS y/o LESS?¿Cómo agregar una fuente personalizada a la aplicación Rails?

EDIT: Aquí está el código que tengo por ahora:

@font-face { 
    font-family: Vow; 
    src: url('/assets/Vow.otf'); 
} 
h1 { 
    font-family: Vow; 
    text-align: center; 
} 

No parece estar funcionando para mí. La salida en la consola de Rails es algo a lo largo de las líneas de:

ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf") 

y el examen de la página con Firebug dice:

downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065 
source: http://localhost:3000/assets/Vow.otf 
+0

Pedido esta http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app – AnkitG

Respuesta

28

Pedido http://www.css3.info/preview/web-fonts-with-font-face/

más grande ejemplo, suponiendo que están resueltos directamente bajo los activos dir

@font-face { 
    font-family: 'Nokia Pure Headline';  
    src: url('/assets/nokiapureheadlinerg-webfont.eot'); 
    src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'), 
    url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'), 
    url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'), 
    url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Lo siento I dont k ahora menos

También para la configuración de la tubería activos para que el contenido de activos/fuentes disponibles bajo que utilice:

# Enable the asset pipeline 
config.assets.enabled = true 
config.assets.paths << Rails.root.join('/app/assets/fonts') 
+0

Editar: Nvm que era capaz de arreglarlo! Actualmente funciona para mí si tengo todo en la carpeta de activos. Continuará trabajando para tener fuentes en una fuente/carpeta específica dentro de la carpeta assets / – tanookiben

2

añadir una fuente personalizada a Rails aplicación mediante el uso de fuentes de Google

de ejemplo I estoy usando cara de la peca
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
rápida de uso: cara de la peca

1. Elija los estilos que desee:
Impacto en el tiempo de carga de la página
Sugerencia: El uso de muchos estilos de fuente puede ralentizar su página web, por lo que solo seleccione los estilos de fuente que realmente necesita en su página web.

2. Seleccione los conjuntos de caracteres que desee:
Consejo: Si elige sólo los idiomas que usted necesita, usted ayudará a prevenir la lentitud en su página web.
América (América)
extendido (latín-ext) América

3. Añada este código a su página web:
Instrucciones: Para integrar su colección en su página web, copia el código como el primer elemento en el de su documento HTML.
http://fonts.googleapis.com/css?family=Freckle+Face' rel = 'text hojas de estilo' type = '/ css'>

4. integrar las fuentes en tu CSS:
La API de Google Fonts generará el CSS específico del navegador necesario para usar las fuentes. Todo lo que necesita hacer es agregar el nombre de la fuente a sus estilos CSS.Por ejemplo:

font-family: 'Freckle Face', cursive; 

Instrucciones: Añadir el nombre de fuente a sus estilos CSS tal y como lo haría normalmente con cualquier otra fuente.

Ejemplo:

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; } 
    example : 
<head> 
    <meta charset='UTF-8' /> 
    <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'> 
</head> 
<body> 
<div id="header"> 
    <div id="nav"> 
    <a href="#contact">Contact</a> <span style="word-spacing:normal; color:white; font-family: 'Freckle Face', cursive;, arial, serif; font-size:20px;"><--Click a link to see this page in action!</span> 
    </div> 
</div> 
</body> 
22

Adición de una fuente personalizada a Rails aplicación

  1. Seleccione el tipo de fuente y descarga
    por ejemplo
    ir a http://www.dafont.com
    seleccione la fuente y la descarga de fuentes

  2. Generar ficheros

    van a http://www.fontsquirrel.com/
    seleccione - generador de fuente Web - seleccione la fuente u descargar (archivo descargado de descomprimir http://www.dafont.com).

  3. Recuperar los archivos de fuente
    Este sitio generará otro zip que contiene todo lo requerido para ese estilo de fuente.
    A partir de ese zip, descomprimir y CSS abierta, copia CSS en su html o css archivo de ese

  4. Añadir la fuente a su aplicación rieles

    (How to add a custom font to Rails app?)

    config/application.rb

    config.assets.enabled = true 
    config.assets.paths << "#{Rails.root}/app/assets/fonts" 
    
  5. Añádelo a la vista:

    <html lang="en"> 
        <head> 
        <style> 
         @font-face { 
         font-family: 'a_sensible_armadilloregular'; 
         src: url('/assets/para/a_sensible_armadillo-webfont.eot'); 
         src: url('/assets/para/a_sensible_armadillo-webfont.eot?#iefix') format('embedded-opentype'), 
          url('/assets/para/a_sensible_armadillo-webfont.woff') format('woff'), 
          url('/assets/para/a_sensible_armadillo-webfont.ttf') format('truetype'), 
          url('/assets/para/a_sensible_armadillo-webfont.svg#a_sensible_armadilloregular') format('svg'); 
         font-weight: normal; 
         font-style: normal; 
        } 
        .content p { 
         font-family: 'a_sensible_armadilloregular'; 
         font-size: 42px; 
        } 
        </style> 
    </head> 
    <body> 
        <div class="content"> 
        <p>sample text</p> 
        </div> 
    </body> 
    

Cuestiones relacionadas