Rails App上的自定义字体未加载

Question

我希望超级简单的问题。 我正在尝试将自定义字体上传到服务器，如下所示：

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');
  }
}

我试过将这三个TTF文件直接放在应用程序/资产（当前尝试）和应用程序/资产/样式表中。 当我做后者时，我尝试将src网址同时设置为/stylesheets/Rockwell.ttf和/app/assets/stylesheets/Rockwell.ttf。

这些都不实际起作用。 当我的朋友在浏览器中加载该网站时，它使用的是另一种字体。 知道我在做什么错吗？ /如何解决？ 如果这仅是CSS3，如何确保使用CSS3？

编辑-我一直在试图找出应用程序在查找字体文件时是否遇到麻烦，因此我检查了inspect元素的network / fonts选项卡。 无论我是否提供真实路径（我都尝试过/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") %>');
  }
}

Answer 1

对我有用的是：

我将字体添加到新的资产/字体/目录，然后将其添加到资产路径

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”

Answer 2

在Rails项目中，我像处理样式表或图像一样构造字体：

样式/样式表/myStyle.css

样式/图片/myImage.jpg

样式/字体/myFont.ttf