web-dev-qa-db-ja.com

カスタムフォントをRailsアプリに追加する方法は？

RoRアプリケーションで使用したいフォントがいくつかありますが、そのフォーマットは主に.ttfと.otfです。これらのファイルを私のRails app？ファイル？

編集：ここに私が今持っているコードがあります：

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

うまくいかないようです。 Railsコンソールの出力は、次のようなものです。

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

Firebugでページを調べると、次のようになります。

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
cssruby-on-railsfonts
23
tanookiben

チェックアウト http://www.css3.info/preview/web-fonts-with-font-face/

より大きな例、アセットディレクトリの下で直接解決されると仮定

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

すみません、わかりません。

また、アセットパイプラインの設定で、使用するアセット/フォントのコンテンツを使用できるようにします。

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

カスタムフォントをRailsアプリケーションに追加する

  1. フォントタイプを選択してダウンロード
    例えば
    http://www.dafont.com に移動します
    フォントを選択してフォントをダウンロード

  2. フォントファイルを生成する

    http://www.fontsquirrel.com/ に移動します
    select-web font generator-select font u download（unzip file download from http://www.dafont.com ）。

  3. フォントファイルを取得する
    このサイトは、そのフォントスタイルに必要なすべてを含む別のZipを生成します。
    そのZipから、zipを展開してcssを開き、cssをそのhtmlまたはcssファイルにコピーします

  4. Railsアプリにフォントを追加します

    （ Rails app？ にカスタムフォントを追加する方法）=）

    config/application.rb

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

  5. それをビューに追加します。

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

googleフォントを使用して、カスタムフォントをRailsアプリケーションに追加します

たとえば、そばかすの顔を使用しています
http://www.google.com/fonts#QuickUsePlace:quickUse/Family ：
クイック使用：そばかす顔

1。必要なスタイルを選択してください：
ページの読み込み時間への影響
ヒント：多くのフォントスタイルを使用すると、Webページの速度が低下する可能性があるため、Webページで実際に必要なフォントスタイルのみを選択してください。

2。必要な文字セットを選択します：
ヒント：必要な言語のみを選択すると、Webページの速度低下を防ぐのに役立ちます。
ラテン（ラテン）
ラテン語拡張（latin-ext）

3。このコードをあなたのウェブサイトに追加してください：
手順：コレクションをWebページに埋め込むには、HTMLドキュメントのの最初の要素としてコードをコピーします。
http://fonts.googleapis.com/css?family=Freckle+Face 'rel =' stylesheet 'type =' text/css '>

4。フォントをCSSに統合します：
Google Fonts APIは、フォントを使用するために必要なブラウザ固有のCSSを生成します。 CSSスタイルにフォント名を追加するだけです。例えば：

 font-family: 'Freckle Face', cursive;

手順：他のフォントで通常行うのと同じように、CSSスタイルにフォント名を追加します。

例：

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