24

RoR アプリケーションで使用したいフォントがいくつかありますが、それらの形式は主に .ttf や .otf などです。これらのファイルを Rails アプリに埋め込むにはどうすればよいですか? つまり、それらをアセットフォルダーに入れたら、それらを CSS や LESS ファイルに埋め込むための正確な構文は何ですか?

編集:これが私が今持っているコードです:

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

3 に答える 3

32

チェックアウト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;
}

申し訳ありませんが、私はLESSを知りません

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

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
于 2012-09-08T08:17:02.790 に答える
25

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

  1. フォントの種類を選択してダウンロード
    します。たとえば
    、http://www.dafont.com
    にアクセスして フォントを選択し、フォントをダウンロード します。

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

    http://www.fontsquirrel.com/に移動し
    ます - Web フォント ジェネレーターを選択します - フォントを選択してダウンロードします ( http://www.dafont.comからダウンロードしたファイルを解凍します)。

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

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

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

    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>

于 2014-01-29T09:44:10.447 に答える
2

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

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

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

2. 必要な文字セットを選択します。
ヒント: 必要な言語のみを選択すると、Web ページの速度低下を防ぐことができます。
ラテン語 (latin)
ラテン語拡張 (latin-ext)

3. このコードを Web サイトに追加します。
手順: コレクションを Web ページに埋め込むには、コードを HTML ドキュメントの最初の要素としてコピーします。

<link href='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; }  

<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>
于 2014-01-29T09:39:34.617 に答える