web-dev-qa-db-ja.com

カスタムフォントをRails 4？

私はRailsアプリにカスタムフォントを追加する方法を研究しています。アセットフォルダーにfontsフォルダーを追加することで、これを行う方法に関する「公式」Rails方法が見つかりません。

はい、この問題に関するSOには多くの質問/回答がありますが、それらはすべて独自のハッキングに関するものです。しかし、そのような一般的な慣行は、Railsの有名な「設定より規約」の下に置かれるべきではありませんか？

または見逃した場合-Railsアプリでフォントを整理する方法に関するドキュメント参照はどこですか？

ruby-on-railsfontsruby-on-rails-4assetsdirectory-structure
29
Numbers

はい、与えられたリンクはそれをうまく説明しますが、別の詳細な説明が必要な場合はここにあります

  • まず、アプリでカスタムフォントを使用するには、フォントファイルをダウンロードする必要があります。 https://www.1001freefonts.com/ を試してフォントを探すことができます。

    最も一般的なフォントファイル形式は、主に.otf（Open Type Format）.ttf（True Type Format）.woff（Web Open Font Format）です

  • ダウンロードしたフォントをapp/assets/fonts /の下のアプリフォルダーに移動できます。

  • ファイルをダウンロードした後、このようにCSSで使用するフォントを「宣言」する必要があります

    @font-face {
  font-family: "Kaushan Script Regular";
  src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}

  • 最後に、このようにどこでも宣言したフォントファミリを使用できます。

    #e-registration {
  font-family: "Kaushan Script Regular";
}

お役に立てれば。

62
Nikhil Nanjappa

やったところです...

  1. フォントファイル（eot、woff、woff2 ...）をassets/fonts /ディレクトリにダウンロードして保存します

    1. config/application.rbにこの行config.assets.paths << Rails.root.join（ "app"、 "assets"、 "を追加しますフォント」）

これが行うことは、デフォルトで画像、スタイルシートなどで行うように、フォントフォルダをプリコンパイルします。

  1. そして、この行がtrueconfig.assets.enabled = trueに設定されていることを確認してください

  2. Sass/scssまたは<script>タグとインライン

    @font-face {   font-family: 'Bariol Regular';   src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');  
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg');   font-weight: normal;   font-style: normal; }

Cssのurlの代わりにfont-urlヘルパーを使用して、アセットをプリコンパイルするときにRails

最後に、CSSファイルでfont-familyを設定します

body {
   font-family: 'Bariol Regular', serif;
}

無料のヒント：これは言われていることですが、パフォーマンスの観点から最も良い方法は、これらのフォントが非同期にロードされるようにJSでこれを設定することです。このローダーを確認してください： https://github.com/typekit/webfontloader

16
luigi7up

上記のアプローチでは、プロダクションcssがコンパイル済みのttfフォントを指していないため、いくつかの問題が発生したため、 https://Gist.github.com/anotheruiguy/7379570から借用したこの代替アプローチを正常に使用しました。 ：

  1. すべてのフォントファイルをassets/stylesheets/fontsに配置します。例えばassets/stylesheets/fonts/digital_7.ttf。

  2. 使用する.scssファイルで定義しました：

    @font-face {
    font-family: 'Digital-7';
    src: asset-url('fonts/digital_7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

  3. 他の.scssファイルのカスタムフォントを活用しました。

    .digital-font {
    font-family: 'Digital-7', sans-serif;
    font-size: 40px;
}

これは、フォント定義（この例ではdigital_7_mono.ttf）を別のサイトに配置することで、よりクリーンな方法を実現できるということです。

たとえば、my_pathというCloudfrontディレクトリでCloudfrontを使用している場合は、フォントファイルをアップロードし、cssファイルを定義します（例：digital_fonts.css）

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

Htmlの<head>タグ内に、次を追加します。

2
Julie

私のために働いた唯一の方法はこれでした：

@font-face {
  font-family: 'Vorname';
  src: asset-url('Vorname.otf') format('truetype'),
       asset-url('Vorname.ttf') format('truetype');
}
0
rld