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文件直接放在app / assets（当前尝试）和app / assets / stylesheets中。当我做后者时，我尝试了src url作为/stylesheets/Rockwell.ttf和/app/assets/stylesheets/Rockwell.ttf。

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

编辑 - 我一直试图弄清楚应用程序是否在查找字体文件时遇到问题，因此我检查了inspect元素的网络/字体选项卡。无论我是否提供了真正的道路（我曾经错误地尝试过/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

对我有用的是什么：

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

<强>配置/ 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文件，因此他们理解“＆lt;％= asset_path”

Answer 2

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

风格/样式表/ myStyle.css

风格/图像/ myImage.jpg

风格/字体/ myFont.ttf

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

2 个答案: