Wie füge ich der Rails App eine benutzerdefinierte Schriftart hinzu?

Ich habe ein paar Schriftarten, die ich verwenden möchte, in meinem RoR-Anwendung, aber Ihre Formate sind vor allem .ttf-und .otf, unter anderem. Wie würde ich mich über die Einbettung dieser Dateien in meiner Rails-app? Nämlich, sobald ich Sie in meinen Ordner "assets", was genau ist die syntax für mich, Sie zu integrieren in mein CSS und/oder mit WENIGER Dateien?

BEARBEITEN:
Hier ist der code habe ich jetzt:

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

Es scheint nicht zu funktionieren für mich. Die Ausgabe in der Rails-Konsole ist etwas entlang der Linien von:

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

Und untersuchen Sie die Seite mit Firebug sagt:

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

InformationsquelleAutor der Frage tanookiben | 2012-09-08

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

Größere Beispiel, wenn Sie beschlossen sind, direkt unter das Vermögen 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;
}

Im sorry, ich weiß nicht, WENIGER

Auch für die config der assets pipeline, um den Inhalt in assets/fonts verfügbar, die wir verwenden:

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

InformationsquelleAutor der Antwort paullth

Hinzufügen einer benutzerdefinierten schriftart Rails-Anwendung

Schriftart auswählen und herunterladen

zum Beispiel

gehen Sie zu http://www.dafont.com

wählen Sie eine schriftart und download schriftart
Generieren, font-Dateien

gehen http://www.fontsquirrel.com/

wählen Sie - web-font-generator - wählen Sie die schriftart u download(entpacken Sie die Datei heruntergeladen http://www.dafont.com).
Abrufen der font-Dateien

Diese Seite generiert ein zip enthalten, die alle die gewünschte schriftart aus.

Aus, dass die zip, entpacken und öffnen, css, kopieren Sie css in Ihre html-oder css-Datei, die
Fügen Sie die schriftart, um Ihre rails-app

(Wie Sie eine benutzerdefinierte schriftart auf Rails-app?)

config/application.rb
```
 config.assets.enabled = true  
 config.assets.paths << "#{Rails.root}/app/assets/fonts"  
```

Fügen Sie es zu der Ansicht:

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

InformationsquelleAutor der Antwort praaveen

2

fügen Sie eine benutzerdefinierte schriftart auf Rails-Anwendung mithilfe von google fonts

zum Beispiel, bin ich mit Sommersprosse Gesicht

http://www.google.com/fonts#QuickUsePlace:quickUse/Family:

Schnelle Verwendung: Sommersprosse-Gesicht

1. Wählen Sie die Stile, die Sie wollen:

Auswirkungen auf die Ladezeit der Seite

Tipp: Über viele Schriftarten verlangsamen kann Ihre Webseite, so dass nur wählen Sie die schriftart, die Sie tatsächlich benötigen auf Ihrer Webseite.

2. Wählen Sie die Zeichensätze die Sie wollen:

Tipp: Wenn Sie nur die Sprachen, die Sie brauchen, helfen Sie verhindern, dass Langsamkeit auf Ihrer Webseite.

Latin (latin)

Erweitertes Lateinisch (latin-ext)

3. Fügen Sie diesen code in Ihre Webseite:

Anleitung: einbetten Ihrer Sammlung in Ihre Webseite, kopieren Sie den code als erstes element in Ihrem HTML-Dokument.

http://fonts.googleapis.com/css?family=Freckle+Gesicht' rel='stylesheet' type='text/css'>

4. Integrieren Sie die Schriften in Ihrem CSS:

Die Google Fonts API erzeugen die notwendige browser-spezifische CSS die Schriftarten. Alles, was Sie tun müssen, ist fügen Sie die schriftart in Ihre CSS-Stile. Zum Beispiel:
```
 font-family: 'Freckle Face', cursive;  
```
Anweisungen: Fügen Sie den Namen der schriftart in Ihre CSS-styles nur so, als würden Sie in der Regel mit jeder anderen Schrift.

Beispiel:
```
 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> 
```
InformationsquelleAutor der Antwort praaveen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.