0

とても簡単な質問だと思います。次のように、カスタム フォントをサーバーにアップロードしようとしています。

custom.css.scss

p, ol, li, a, td, ul, h1, h2, h3, h4, h5, h6, label {
  font-family: rockwell;
  src: url('/assets/Rockwell.TTF');
  text-align: left;
  em {
    font-family: rockwell;
    font-style: italic;
    src: url('/assets/RockwellItalic.TTF');
  }
  strong {
    font-family: rockwell;
    font-weight: bold;
    src: url('/assets/RockwellBold.TTF');
  }
}

これら 3 つの TTF ファイルを app/assets (現在の試み) と app/assets/stylesheets の両方に直接配置しようとしました。後者を行ったとき、src url を /stylesheets/Rockwell.ttf と /app/assets/stylesheets/Rockwell.ttf の両方として試しました。

これらのどれも実際には機能していません。私の友人がブラウザでサイトをロードすると、別のフォントになっています。私が間違っていることは何か分かりますか？/ 修正方法は? これが CSS3 のみの場合、CSS3 を使用していることを確認するにはどうすればよいですか?

編集-アプリがフォントファイルを見つけるのに問題があるかどうかを調べようとしていたので、検査要素のネットワーク/フォントタブを確認しました。実際のパスを提供するかどうかに関係なく (誤って /stylesheetsRockwell.ttf を試しました)、そこには何も表示されません。

編集 - 太字と斜体でラップする方法はありますか?

@font-face {
  font-family: 'Rockwell';
  src: url('<%= asset_path("Rockwell.ttf") %>');
  font-weight: normal;
  font-style: normal;
  strong {
    src: url('<%= asset_path("RockwellBold.ttf") %>');
  }
  em {
    src: url('<%= asset_path("RockwellItalic.ttf") %>');
  }
}
4

2 に答える 2

2

私のために働いたもの：

フォントを新しい assets/fonts/ ディレクトリに追加し、それをアセット パスに追加しました

config/application.rb

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

次に、標準、太字、イタリックにするアイテムに個別に割り当てたフォント フェイスを宣言しました。

typography.css.erb.scss

/* font families */

@font-face {
  font-family: 'Rockwell';
  src: url('<%= asset_path("Rockwell.ttf") %>');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Rockwell Italic';
  src: url('<%= asset_path("RockwellItalic.ttf") %>');
}
@font-face {
  font-family: 'Rockwell Bold';
  src: url('<%= asset_path("RockwellBold.ttf") %>');
}

p, ol, small, ul, li, td, th, h3, h4, h5 ,h6, label {
  font-family: Rockwell; # The elements I wanted defaulted to normal
}

h1, h2, a, strong {
  font-family: 'Rockwell Bold'; # The elements I wanted defaulted to bold
}

li {
  small {
    font-family: 'Rockwell Bold'; # Subset I wanted defaulted bold
  }
}

em {
  font-family: 'Rockwell Italic'; # Manual italic
}

# Whenever I wanted italic or bold, I did it through font-family for consistency.

これは、すべての css ファイルを css.erb.scss ファイルに変換することを意味するため、「<%= asset_path」を理解します。

于 2013-02-23T21:44:00.423 に答える
1

Railsプロジェクトでは、スタイルシートや画像の場合と同じようにフォントを構造化します。

style / stylesheet / myStyle.css

style / images / myImage.jpg

style / fonts / myFont.ttf

于 2013-02-21T16:59:48.060 に答える